Return to previous page

Change product display as in theme demo - by filiphdan

This topic has 7 replies, 3 voices, and was last updated 4 years, 3 months ago ago by Olga Barlow

filiphdan

Participant

November 13, 2020 at 12:45

Hello,

I am still finishing refreshing my webshop, now i intend on updating the product display, i look in your demos and i found this one: https://prnt.sc/vik8lt

I like how it is, the descriptions underneath, i want to do a equal one, replacing the small icons (scent,texture,color,etc by my own icons), and having the product image a bit smaller, i am having problems in configuring this, or iam missing some options…

I would also like to know in the same demo how to make the effect of products rising wen you hover them: https://prnt.sc/vikauv , i would like this effect and apply to it the wishlist heart and the eye (quick view) icon to see how it would look.

Thanks!

#259373 Copied Theme version: 6 WooCommerce version: last

6 Answers
Rose Tyler

Support staff

November 14, 2020 at 10:14
Hello,

1) This demo https://xstore.8theme.com/demos/2/organic-cosmetics/ uses Single product builder – https://prnt.sc/vj0gne You can enable it in Theme Options > WooCommerce (Shop) > Single product builder, but you will need to build the content of the single product page from scratch.
If you want to have something like this – https://prnt.sc/vj0ig8 , the Single product builder is not required. Create static blocks https://prnt.sc/vj0ilk then https://prnt.sc/vj0jqd – https://prnt.sc/vj0jtr
2) Add the next code in Theme Options > Theme Custom CSS:

.products-loop .product:hover, .carousel-area .product-slide:hover { box-shadow: 0 0 10px 3px rgba(0,0,0,.1); z-index: 2; transform: translateY(-5px); border-radius: 5px; } .products-loop .product, .swiper-container .product-slide { transition: all .2s ease-in-out; } .products-loop .type-product { padding-top: 15px; }

Regards
#259504 Copied
filiphdan

Participant

November 14, 2020 at 17:58

Could you export the single product builder of : https://xstore.8theme.com/demos/2/organic-cosmetics/ , so i could load it in my test site?

Thank you!

#259558 Copied

Olga Barlow

Participant

November 15, 2020 at 16:07

Hello,

I have created single product custom Static block and chose it for the single product example http://prntscr.com/vjiomg Or you can also use this block shortcode in the short description.
Then I created single product layout using single product builder. Check, please and let me know if you need any other guide.

Regards

#259650 Copied

filiphdan

Participant

November 15, 2020 at 16:19

Hi,

Thank you, just missing the product description has it was in demo , and the color of the button: https://prnt.sc/vjituo

Thanks for the help!

#259654 Copied

filiphdan

Participant

November 15, 2020 at 16:28

No need, i just opened your single product builder and seen how it can be done.

thanks!

#259655 Copied

Olga Barlow

Participant

November 15, 2020 at 17:27

Hello,

You can change the button color in the single product builder http://prntscr.com/vjjfcj
The same for tabs.

Regards

#259666 Copied
Viewing 7 results - 1 through 7 (of 7 total)