Return to previous page

Equal height is not working and need to add or place some images before product name in each section

This topic has 6 replies, 2 voices, and was last updated 1 hours ago ago by Andrew Mitchell

scriptocademy

Participant

January 8, 2025 at 10:49

I want to display products equal height while using product carousel widget.

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#429850 Copied Theme version: 9.4.6

5 Answers

Andrew Mitchell

Support staff

January 8, 2025 at 13:20

Hello, scriptocademy,

Thank you for reaching out to us.

We have reviewed the images you provided, and it appears that there is an issue with inconsistent heights in the product carousel. This can occur when product titles, descriptions, or other elements have varying lengths, causing the cards to misalign.

To resolve this issue, we recommend the following steps:

1. Enable Equal Height for Product Cards:
– Check if your theme or page builder has an option to enforce equal heights for product cards. This is often found in the carousel or grid settings.

2. CSS Adjustment:
– Add custom CSS to ensure all product cards have the same height. For example:
` etheme-product-grid-item {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}`

3.Limit Text Length:
– Shorten product titles or descriptions to maintain uniformity. You can use a character limit or truncate longer text.

4. Use Placeholder Space:
– Add placeholder space for shorter titles or descriptions to align with longer ones.

Please let us know if you need further assistance with implementing these changes.

Best Regards,
8Theme’s Team

#429878 Copied

scriptocademy

Participant

January 8, 2025 at 16:23

You replied only for my one question I asked you 2 questions, please reply my second question as well, thank you!

#429911 Copied
Andrew Mitchell

Support staff

January 9, 2025 at 13:14
Hello, scriptocademy,

Before adding an image, you can use the following code. Please add it to the functions.php file of your child theme and replace the placeholder with the appropriate image URL
```
add_action('woocommerce_after_shop_loop_item_title','add_custom_image_after_product_title', 15);

function add_custom_image_after_product_title() {
    $image_url = 'https://example.com/path-to-your-image.jpg'; 
    
    echo '<div class="custom-product-image">';
    echo '<img src="' . esc_url($image_url) . '" alt="Custom Image" />';
    echo '</div>';
}
```
Best regards,
The 8Theme Team
#430012 Copied
scriptocademy

Participant

January 9, 2025 at 14:10

its not working

my code is :
add_action(‘woocommerce_after_shop_loop_item_title’,’add_custom_image_after_product_title’, 15);

function add_custom_image_after_product_title() {
$image_url = ‘https://alltrade.ae/_next/static/media/tabby4.0bb90d6c.png’;

echo ‘

‘;
echo ‘‘;
echo ‘

‘;
}

#430019 Copied

Andrew Mitchell

Support staff

January 9, 2025 at 16:45

Please kindly use the CODE tag when adding code to the reply; otherwise, it appears unreadable. Additionally, we kindly ask you to review the uploaded images.

Best regards,
8Theme Team

Files is visible for topic creator and
support staff only.

#430050 Copied
Viewing 6 results - 1 through 6 (of 6 total)