Return to previous page

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

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

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.

#222088 Copied Theme version: 6.0.2

21 Answers

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

#222129 Copied

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 ?

#222131 Copied

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://xstore.helpscoutdocs.com/article/102-wishlist

Regards

#222133 Copied

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?

#222334 Copied

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

#222365 Copied

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

#222496 Copied
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
#222517 Copied
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!

#222551 Copied

Rose Tyler

Support staff

October 4, 2019 at 12:33

Hello,

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

Regards

#222555 Copied

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/

#222782 Copied
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
#222822 Copied
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 ?

#223668 Copied
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
#223686 Copied
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?

#227022 Copied
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
#227032 Copied
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

#227129 Copied
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
#227146 Copied
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?

#227369 Copied
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
#227388 Copied
1 2

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