Variable product page - by Evgeny V - on WordPress WooCommerce support

This topic has 22 replies, 4 voices, and was last updated 4 years, 10 months ago ago by Rose Tyler

  • Avatar: Evgeny V
    Evgeny V
    Participant
    September 26, 2019 at 14:42

    Hello,

    Some questions regarding the product page:

    1. How can I set a standard variable product page layout as https://xstore.8theme.com/product/variable-product/ include product layout, all the bottom tabs (Description, Additional information, Reviews, Shipping & Delivery), etc for all my variable products on the site (globally)?

    2. How can I then modify that standard variable product page both globally for all products and for a specified product only?

    Please, contact administrator
    for this information.
    21 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 27, 2019 at 08:18

    Hello,

    1. Theme Options > WooCommerce (Shop) > Single product page > Thumbnails > Vertical.
    By default, there are 2 custom tabs: – Theme Options > WooCommerce (Shop) > Single product page > Tabs Settings > Custom Tab (same for all products); – Custom tab content on a separate product page > [8theme] Product Options – http://prntscr.com/pblsjn http://prntscr.com/pblssm http://prntscr.com/pblsvr
    https://youtu.be/XO-PDvhPypc
    2. Global settings you can find in Theme Options, individual in [8theme] Product Options.
    Let us know if you need any further assistance.

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    September 27, 2019 at 09:01

    Hello,

    It is clear about Vertical Thumbnails, thanks.

    But regarding the custom tabs unfortunately I have no Shipping tab in Static Blocks: https://prnt.sc/pbmbey as well as I have no Additional Information tab in my product page.

    How can I get or import them and apply for all site pages by default?

    Here is my Theme Options > WooCommerce (Shop) > Single product page > Tabs Settings > Custom Tab (same for all products) page: https://prnt.sc/pbmflx

    Also where can I find and add to my page Add to Wishlist and Compare options like on demo page (marked with red) : https://prnt.sc/pbmhqb ?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 27, 2019 at 09:12

    Hello,

    1) I’ve added “Shipping tab” static block on your site. Please check – http://prntscr.com/pbmlhi
    Additional Information is a default WC tab – https://docs.woocommerce.com/document/editing-product-data-tabs/#section-6 and should be shown automatically. Is it shown on your site if the default theme (Storefront) activated?

    http://prntscr.com/pbmo6b

    2) You need to install and activate WishList and Compare plugins (Appearance > Install plugins) + https://www.8theme.com/documentation/xstore/plugins/wishlist/

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    October 1, 2019 at 11:45

    Hello,

    1. Many thanks for adding “Shipping tab” static block on my site.

    1.1. I have checked the default theme (Storefront) as you recommended and Additional Information tab is shown on the site – https://prnt.sc/pdaz7w

    So how I can get and manage this tab in your theme on my site?

    2. Thanks for your information about the plugins.

    3. New very important issue. There is dramatically site speed drop while I apply your XStrore theme on the site compared of default Storefront. Default theme open any page shortly but XStore makes you wait for ages… You can see it by open any page on my site (main page, category or product pages).

    What is the reason? How to improve site speed?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    October 1, 2019 at 18:55

    Hello,

    1) We have updated theme to latest version and don’t see any problems with the additional information tab. So, probably you made some changes in template files that caused this issue.
    3) You have a lot of variations. We would recommend you to disable variation swatches on grid http://prntscr.com/pdi8zv it will reduce the number of requests for pages where you display products and speed up the site. Also, we have installed cache plugin.

    Rrgards

    Avatar: Evgeny V
    Evgeny V
    Participant
    October 3, 2019 at 11:24

    Hello,

    Thank you for your premium support.
    It works much better now.

    Here below are some my last (i hope) questions to this variable product page:
    1) There is horizontally image shrinking by clicking on the product image to open it for preview – https://prnt.sc/pe96km
    For example, you can see it here – /product/lajt/ after choosing any product attributes and then clicking on the result product image.
    How to improve it?

    2) Is it possible to mark the final product price by any color, for example red? – https://prnt.sc/pe9dlt

    3) Probably it is not a theme’s feature, but is it possible to display a notification/message on the product page if the customer choose a specific attribute value? And than put this note into the order/cart.
    For example, if selected product length > 200cm the notification “all products larger than 200cm are consist of two parts” appears.

    4) If I do not need the Size guide link for any specified product how to disable it?

    Regards

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    October 3, 2019 at 18:07

    Hello,

    1) We use the photoswipe library to display that popup and it seems this JQuery library script calculates the height of the popup depending on the featured image proportions. So, I would recommend you to change the image proportion to square http://prntscr.com/pegjvy if you use squared featured product image because we are not able to edit the original js code of the photoswipe related to this moment.

    2) Yes, no problem just add the following code to child theme style.css

    .woocommerce-variation-price .woocommerce-Price-amount.amount {
        color: #dd1432;
    }

    3) Use the description field for your variation http://prntscr.com/pegnc4
    4) Remove it from the global options and add only for those products you need http://prntscr.com/pego6k

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    October 4, 2019 at 11:23

    Hello,

    1) I used squared product image for other product, but it seems the issue is still remain: https://prnt.sc/perew0 https://prnt.sc/perf5k
    You can see it it here – /product/standart/

    BTW What is the optimal/recommended image size (pixels) for this purpose?

    2), 3) and 4) Many thanks for your help!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 4, 2019 at 12:33

    Hello,

    Featured image of the mentioned product is http://prntscr.com/pesli1http://prntscr.com/peslpa Just upload images for variations in the same proportions as the featured image.

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    October 8, 2019 at 10:36

    Hello,

    I am sorry, but I don’t understand. I have uploaded some images: featured and gallery (for variations) in the same proportions and size (650×650 pixels), but it still display incorrectly..

    Also, the product gallery’s photos in the slider jump up by scrolling.

    You can see it it here – /product/valans/

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    October 8, 2019 at 19:15

    Hello,

    If you upload the featured image with size 650×650 then use 650×650 image for the variations. If you upload featured image 650×500 then use 650×500 image for the variations, that’s all. And there won’t be any problem of scalled images https://gyazo.com/224e6e7d6217c324fa24c584d2f12143

    Product gallery image jumps up on hover https://gyazo.com/58847cb15a140601eec6c28087cdff69 to highlight the image you plan to click. If you don’t like this effect add the following custom

    .thumbnails-list .slick-slide:hover a, .thumbnails-list .swiper-slide:hover a, .thumbnails-list .active-thumbnail a {
        transform: translateY(0);
    }

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    October 22, 2019 at 16:16

    Hello,

    Thank you. It is clear now. The problem was that I did not clear the browser cache after uploading new images.

    Finally, is it possible to set a custom value for the number of rows and columns for variation values (for example 2×6 or 3×4) https://prnt.sc/pmpwgh ?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 22, 2019 at 20:11

    Hello,

    You’re welcome!
    There is no such possibility, by default, but you can use this custom CSS code:

    .single-product .st-swatch-preview-single-product {
        max-width: 60%;
    }

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    December 18, 2019 at 07:37

    Hello,

    Is it possible to redefine product attribute label’s caption on the product page? For example, the product attribute name is “Color”, but it should displays as “Select color” https://prnt.sc/qcduc6
    I know that i can change the attribute name from “Color” to “Select color”, but i need to keep the original name.

    2) Is it possible to display the value of the selected variation below variation switches i.e if the Color’s selected value is Red then the string “Red” appears?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 18, 2019 at 10:10

    Hello,

    1) WooCommerce does not have such option. Only if you change the attribute title you’ll get changes on the single product.
    2) Try to add the code below to custom CSS and ley me know if it’s suitable for you

    .selected.type-color:after, .selected.type-image:after {
        opacity: 1;
        visibility: visible;
        bottom: -5px;
    }

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    December 19, 2019 at 09:03

    Hello,

    1) OK, understand. Thanks.
    2) It is better that none, but i would prefer to show the selected attribute value in full text format below the image, as after applied this code there are some limitations: a) it overlaps the line below https://prnt.sc/qcxb57 and b) it does not appear on mobile.
    Is it possible to display it in other ways?

    Regards

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 19, 2019 at 11:48

    Hello,

    To fix overlap and mobile appearance use the following custom

    .variations_form .st-swatch-preview-single-product.st-image-swatch {
        margin-bottom: 20px;
    }
    @media only screen and (max-width: 768px) {
        .type-color:after, .type-image:after, .sten-li-disabled:after {
            display: inline-block;
        }
    }

    Is it possible to display it in other ways?

    Provide mockup how would you prefer to display it?

    Regards

    Avatar: Evgeny V
    Evgeny V
    Participant
    December 22, 2019 at 12:01

    Hello,

    1) I used CSS to fix overlap and mobile appearance and it looks much better now, but the attribute value is partially hidden beyond the screen border on mobile: https://prnt.sc/qe8rw7

    2)

    Provide mockup how would you prefer to display it?

    In my opinion, the best solution would be to display the selected value in one line with the attribute title: https://prnt.sc/qe8oas
    Is it possible?

    Avatar: John Holden
    John Holden
    Support staff
    December 23, 2019 at 06:28

    Hi,

    Use following custom CSS

    
    @media (max-width: 465px){
    .type-image:first-child:after {
        transform: translate(-16%,100%);
    }
    }
    

    Regards,
    Hung PD

    Avatar: Evgeny V
    Evgeny V
    Participant
    January 8, 2020 at 19:48

    Hello,

    Is it possible to change the product attribute title font color and parameters (for example to red bold or italic)?

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 9, 2020 at 08:27

    Hello,

    .single-product .product-information .variations label {
        color: red;
        font-size: 19px !important;
        font-weight: 600;
        font-style: italic;
    }

    Regards

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

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

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