How to customize single product page

Hi there,

We would like to customize the single products page as shown on this website (https://www.winni.in/affable-butterscotch-cake/pd/16531?rfcid=307).

Our Query: 1. How to add add-on products in products page?
2. How to show product pop-ups on products page when clicking the add to cart button?
3. How to add a checkbox for variations?

Please refer to the above site.

Hello,

Thank you very much for choosing our theme and for contacting us.

1. How to add add-on products in products page? – If I understand you properly, you mean upsells products or related? Here is the instruction: https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

2. Woocommercee does not provide such an option by default. You will have to find a plugin.

3. Swatches:
By default, variable product attributes are presented as a dropdown in WooCommeerce. WoodMart theme suggests the option to present the attributes as swathes.

Swatches are enabled in Dashboard -> Products -> Attributes -> chose the attribute -> Configure Items -> Edit -> Enable swatch. All the attributes would be presented as text instead of a drop-down.

In order to show the attribute item as a color swatches (vide color attribute on the image above), it is necessary to set the color in “Color preview for this value” and colors will have the view as shown in the image above.

Swatches may be presented as featured images taken from product variations. This option is provided in the Theme Settings > Shop > Attribute swatches > Grid swatch attribute to display – choose pa_color (the color attribute, for example) and “Use images from product variations” should be enabled. The variable product should have featured image for each variation http://prntscr.com/kk870w

Best Regards

Hi Xtemos team,

For variable products, We would like to show a low price in the product grid (shop page) and price range (low to high price) in the single product page.

How do I change that in woocommerce?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-grid-item .price,
body .single-product-page .summary-inner > .price {
        font-size: 0;
}
.single-product-page .summary-inner > .price > span:first-child {
   font-size: 22px;
}
.single-product-page .summary-inner > .price > small {
    font-size: 18px;
    margin-left: 6px;
}
body .product-grid-item .price > ins,
body .product-grid-item .price > span:first-child {
   font-size: 14px;
}
body .product-grid-item .price > del {
    font-size: 12px;
    margin-right: 3px;
}
body .product-grid-item > .price > small {
    font-size: 12px;
    margin-left: 4px;
}
body .single-product-page .summary-inner > .price > ins,
body .single-product-page .summary-inner > .price > span:first-child {
   font-size: 22px;
}
body .single-product-page .summary-inner > .price del {
    font-size: 22px;
    margin-right: 6px;
}

@media (max-width: 576px) {
    body .product-grid-item.col-6 .price {
        font-size: 0;
    }
}

A single product cannot have any price ranges. What do you mean?

Best Regards

Its working fine on all products/shop page as we wanted. But the provided CSS hid the variable product price range in the product page and displays only the minimum amount, instead, we want to display the variable price range in the product page.

I mean, I wanted the woocommerce default setting on the product page.

Hello,

If you want to show the lower price only on the product grid, replace the provided code with this one:

body .product-grid-item .price{
        font-size: 0;
}
body .product-grid-item .price > ins,
body .product-grid-item .price > span:first-child {
   font-size: 14px;
}
body .product-grid-item .price > del {
    font-size: 12px;
    margin-right: 3px;
}
body .product-grid-item > .price > small {
    font-size: 12px;
    margin-left: 4px;
}

Best Regards

[Author]

Posts