Woo product box2

Hi,
If the template is editable with tagDiv Composer, edit it and set the class from the image on the block (cls-wpb), then make sure that the css is also loading on that template if not, then set it in a css element from tagDiv Composer.
Thank you!

Hi,
This is because teh above code was made for a specific block, and that block also used an extra class that has been added on the block using the tagDiv Composer.
Do you want to have this layout https://i.imgur.com/gV60T5S.png on most of the blocks? We discuted about this and how to achive taht layout in this topic – https://forum.tagdiv.com/topic/woo-product-box/
Thank you!

Hi,
Normally, you should use the Theme Builder to edit the block layout. Once you have adjusted one block, you can copy and paste the styles to the other blocks.

If you prefer to proceed using CSS, you can try something like this:
.tdc-content-wrap .td-excerpt{
padding-bottom: 16px;
border-bottom: 2px solid #e7f0f1;
}
html body .tdc-content-wrap div.star-rating {
float: left;
}
.tdc-content-wrap .td-module-meta-info{
border-radius: 0 0 10px 10px;
}
body div.td_woo_products_block .tdc-content-wrap div.td_woo_product_module .price{
margin-bottom: 0;
}
body .tdc-content-wrap div.td_woo_products_block .star-rating {
margin: 6px 0;
}
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 0 0 10px 10px;
padding-bottom: 10px;
}
The CSS should be added in Theme Panel > Custom Code > Custom CSS. Be sure to check all pages to confirm that it displays correctly and does not break the layout of any blocks.

Thank you!

Hello,

1. That is only a notice and is not an interference or an effect on the website.

2. For that, replace teh last part of css I provided (this one)
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 0 0 10px 10px;
padding-bottom: 10px;
}
with this one:
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 10px;
padding-bottom: 10px;
border: 1px solid gray;
box-shadow: 1px 1px 5px 1px gray;
}
you can adjust the code after your needs.

3. To align the stars and the price on the same line, it is necessary to change somewhere halfway through the css code above.

4. For this you need to use tagDiv Composer on the pages where you have blocks and see if the blocks you have on the website have the option to display the “View/read more” button https://i.imgur.com/eeiflV4.png

Thank you!

Hi,

Item 3: I’ll review this and let you know what I’m able to do as soon as I have an update.

Item 4: It’s not possible to display both options at the same time. The option shown will depend on the item’s status:
– If the item is out of stock, “Read More” will be displayed.
– If the item is available, the “Add to Cart” button will appear. (This behavior applies only to WooCommerce Blocks.)

Regarding the shadow effect, you can check how CSS shadows work by following this guide:
https://www.w3schools.com/css/css3_shadows_box.asp

Thank you!

Hi,
It’s not that simple. If it were, all you’d need to do is take the code from there.
I hope this code does what you need and doesn’t break anything.
.td_woo_product_module .td-module-container .td-module-meta-info {
display: block;
text-align: center;
}
body .tdc-content-wrap div.td_woo_products_block .star-rating
Specificity: (0,3,2)
{
margin: 0px 10px;
}
div.td_woo_products_block div.td_woo_product_module .price {
text-align: right;
margin-right: 10px;
}

For shadow on css code:
body .tdc-content-wrap .td-module-container {
box-shadow: -1px 1px 3px 1px gray;
}
Just change the box-shadow