product archive style

Hello,

Im trying to change the product style a little but after a few hours of work i cant figure it out.

I was able to divide the flex container into two parts, but i cant get the variables table below the image and description container.

please see attached image for clarification.

my code:
.product-wrapper {
display: flex !important; /* Apply flexbox layout */
flex-direction: row !important; /* Align items in a row */
align-items: flex-start !important; /* Align items to the top */
justify-content: flex-start !important; /* Align children to start of the row */
}

.product-element-top {
width: 50% !important; /* Image section takes 50% of the width */
box-sizing: border-box !important; /* Include padding/border in the width */
}

.product-element-bottom {
width: 50% !important; /* Bottom section takes the other 50% */
padding-left: 20px !important; /* Space between image and text */
box-sizing: border-box !important; /* Include padding/border in the width */
display: flex !important;
flex-direction: column !important; /* Align content vertically */
justify-content: center !important; /* Center content vertically */
}

.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I will check and give you a possible solution.

Best Regards

link

Hello,

Unfortunately, it is not possible. HTML structure does not allow solving it by custom CSS. Such modification requires complicated Woocommerce code customization which is not covered by our support.

Best Regards

Ok. thank you for the information. can i add the short product description to the product archive style?

i want it to be always displayed not only on hover.

i have also attached a picture.

https://www.contessa.si/shop/

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings > Product Archive > Product Styles > Choose the “show summary on hover” product style. Then show “excerpt” in the Hover content in the Theme Settings > Product Archives > Product Styles.

This product style will show your short description on grid products.
https://monosnap.com/file/swCqK6RIIrYuhoROH6YOkEfBjfPMKx

If you have any questions feel free to contact us.

Best Regards.

Thank you. But can i somehow display it on a non-hover optioned product style? I want the product style shown in the picture. can i add it via css so its shown ? Thank you

Nevermind. got it to work.
if anybody has the same problem..just copy this to functions.php

add_action(‘woocommerce_after_shop_loop_item_title’, ‘description_in_shop_loop_item’, 3 );
function description_in_shop_loop_item() {
global $product;

// HERE define the number of characters
$limit = 100;

//$description = $product->get_description(); // Product description
// or
$description = $product->get_short_description(); // Product short description

// Limit the characters length
if (strlen($description) > $limit) {
$excerpt = substr($description, 0, $limit) . ‘…’;
} else {
$excerpt = $description;
}

echo ‘<p class=”description”>’.$excerpt.'</p>’;
}

Hello,

Glad you got it sorted! Thanks for sharing the solution—it’ll be helpful for others too. Let me know if you need further assistance.

Thanks for contacting us.

Have a great day.

Best Regards

[Author]

Posts