This topic has 22 replies, 4 voices, and was last updated 4 years, 10 months ago ago by Rose Tyler
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?
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
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 ?
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?
2) You need to install and activate WishList and Compare plugins (Appearance > Install plugins) + https://www.8theme.com/documentation/xstore/plugins/wishlist/
Regards
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?
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
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
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
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!
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
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/
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
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 ?
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
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?
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
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
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
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?
Hi,
Use following custom CSS
@media (max-width: 465px){
.type-image:first-child:after {
transform: translate(-16%,100%);
}
}
Regards,
Hung PD
Hello,
Is it possible to change the product attribute title font color and parameters (for example to red bold or italic)?
Regards
Hello,
.single-product .product-information .variations label {
color: red;
font-size: 19px !important;
font-weight: 600;
font-style: italic;
}
Regards
You must be logged in to reply to this topic.Log in/Sign up