Single product page.. - by DeVereor - on WordPress WooCommerce support

This topic has 19 replies, 3 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

  • Avatar: DeVereor
    DeVereor
    Participant
    February 7, 2018 at 00:47

    using underwear skin.
    on single product page, pretty much none of the preset layouts work properly for me :/
    currently selected “booking” layout, as only one that shows product details like weight, brand, colour.

    1) would like the products name in left column above images (so it shows first on mobile) and price in pink beside it (aswell as in column 3
    2) central column, would like the products details written in the pink, as the preset colour is illegible on the background (black on dark purple).
    3) “add to wishlist” text and icon in third column also illegible (currently white on white)
    4) items that have options.. options select doesn’t fit in frame.
    5) options text also currently white on white.
    6) could you remove the text “product price” from third column
    7) could you remove the categories information from third column
    8) would like product description moved to top of column 2, and if possible have the product details in that column made collapsed so click to open/close.

    that is all for now.
    sorry so many, just so many things about the product page that don’t work or don’t make sense as they are.
    thank you in advance

    Please, contact administrator
    for this information.
    18 Answers
    Avatar: DeVereor
    DeVereor
    Participant
    February 7, 2018 at 12:28

    is this being looked at?
    as i asked for help 11hours ago.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 7, 2018 at 15:50

    Hello,

    Reply time on the support forum is up to 24 hours and depends on the number of requests. We are sorry if you faced some delay. You’ll always get the answer, be sure.

    1. This requests some customization in theme files.
    2. Please add this code in Theme Options > Styling > Custom css:

    .single-product .product-information-inner p {
        color: pink !important;
    }

    3, 5.

    .single-product-booking .product-side-information-inner .variations label, .single-product .yith-wcwl-add-button.show a {
        color:  pink;
    }

    4.

    .single-product-booking .product-side-information-inner .variations select {
        width: 100%;
    }

    6, 7.

    .single-product-booking .product-side-information-inner span.posted_in, .single-product-booking .product-side-information-inner .product-price-title  {
        display:  none;
    }

    8. Please provide some screenshots for better understanding desired result.

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    February 7, 2018 at 18:47

    thank you so much so far.
    sorry for impatience, just trying to make sure i can get this working before purchasing more to roll out onto my already live sites.

    i know technically it’s theme customisation, but in the course of making the theme work correctly, as my requests are for things that logically already should be how i ask.. as flows better for end customer.

    1) actually want product name to be where “product price” was removed from, as on mobile makes sense (currently it shows very low as on mobile it displays column 1, then 3, then 2). see screenshot (blue)
    2) this didn’t alter all, see screenshot (red)
    8) item description is currently the last thing seen as way below everything, even though it is more important than product details. so ideally it should be in central column just above the details. see screenshot (green)

    i know some are technically theme customisation, but as is it doesn’t work as it should.

    i greatly appreciate your help and support

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 8, 2018 at 15:19

    Hello,

    1) Then you need to copy xstore/woocommere/single-product-content-booking.php file into child theme and do the following changes
    http://prntscr.com/ibwavn

    If you don’t have the necessary skills we could help you with this, then provide FTP and admin panel access to your site.

    2) Replace this code

    .single-product .product-information-inner p {
        color: pink !important;
    }

    by this one

    .single-product .product-information-inner p, .single-product-booking .product-information-inner .shop_attributes td p {
        color: #ffc0cb;
    }

    8) Use the following custom to change the order

    @media only screen and (max-width: 768px){
    .single-product-booking .product-content .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .single-product-booking .product-side-information {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        margin-top: 40px;
    }
    }

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    February 8, 2018 at 16:13

    Thank you Olga.

    1) worked as hoped, although what code do I add to css to change its colour?
    2) didn’t change weight information, it’s still black.
    8) doesn’t seem to change their order as expected, it just breaks the product images on mobile and switches columns 2 and 3 instead of keeping them the same and adding product description above the product details in column 2

    Thank you again by the way, you are being incredibly patient with me on this

    Regards,
    Chris

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    February 8, 2018 at 18:08

    Hello,

    Could you, please, provide me temporary admin panel access to your site? It will be faster to create the necessary code.

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    February 8, 2018 at 18:26

    thank you, here..

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 9, 2018 at 11:02

    Hello,

    Please check now. If this is not what you looking for, please provide screenshot for better understanding the desired result.

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    February 9, 2018 at 11:25

    thank you! so close!

    Only thing missed (and i’m happy to struggle to do it myself if you point me in the right direction) is that ideally the product description needs to be as in the screen shots highlighted to show you in green and blue.
    as i say, if this change is asking too much, please just point me in the right direction and ill hopefully eventually work it out 🙂

    Chris

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 9, 2018 at 13:15

    Hello,

    Please check now.
    We made changes in xstore-child/woocommerce/single-product-content-booking.php and disabled Tabs in 8Theme Options -> E-Commerce -> Single product.

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    March 5, 2018 at 14:34

    one last thing on this, the changes you made mean i now have the description where i want, but its also below everything else, and i didnt want to keep the lower one. what do i need to edit in order to remove that?

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 5, 2018 at 15:22

    Hello,

    Sorry but your explanation is a bit unclear. Could you please provide some screenshots for better understanding?

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    March 5, 2018 at 15:30

    sorry,
    so.. in screenshot.. the green is where you moved the description to for me, and loving it there.
    the red is where it used to be, and where it is still. so currently description is on single product page twice. so what do i need to edit to remove the red highlighted one?

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 5, 2018 at 17:05

    Theme Options > E-commerce > Single product page > Tabs type > Disable.

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    March 5, 2018 at 17:16

    thank you 🙂
    but… what is the file linked to those tabs? as i would like to nose at it to see if i can keep reviews available.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 6, 2018 at 08:18

    Hello,

    You can select “Reviews position” > “Next to tabs” in Theme Options, also you can remove “Description” tab using code from this article https://docs.woocommerce.com/document/editing-product-data-tabs/ (add code in functions.php of child theme).

    Regards

    Avatar: DeVereor
    DeVereor
    Participant
    March 6, 2018 at 08:27

    That’ll do it!
    Thank you once again, always a pleasure

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 6, 2018 at 11:11

    You’re welcome!
    Have a nice day.

    Regards

  • Viewing 19 results - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.