Return to previous page

Single Product Page and Product Grid Customization Request

This topic has 6 replies, 2 voices, and was last updated 1 months, 1 weeks ago ago by Luca Rossi

Drishti

Participant

October 7, 2024 at 23:11

I need assistance with a few customizations on my website, specifically for the single product page and product grid:

1) Single Product Page Customizations:

a) Spacing Issue (Variation and Price): There is more space than needed between the product variations and the price. How can I reduce this gap? I’ve attached a screenshot for reference.

b) Customization of ‘In Stock’ Message:
i) Could you provide the CSS to customize the “In Stock” message style?
ii) If I want to change the “In Stock” text to something else, how can I do that?
iii) When a product is out of stock, I’d like the message to display as “Stock Out” instead of “Out of Stock.” Could you guide me on how to implement this?

2) Product Grid/Product Carousel Customization:

In my product grids and carousels, some product titles are longer and don’t fit in one line, making the columns inconsistent in height. I’d like to ensure that the title always takes up two rows of space, regardless of the length of the text, to keep the layout uniform. Could you help me achieve this?

Thank you for your help with these customizations. Let me know if you need any further details.

Files is visible for topic creator and
support staff only.

#417667 Copied Theme version: 9.4.2

5 Answers
Luca Rossi

Support staff

October 8, 2024 at 11:31
Hi @Drishti,

1.a. Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.single-product table.variations {
    margin-bottom: 0;
}
```
1.b. Please try adding this custom code under functions.php file locates in your child theme:
```
add_filter( 'woocommerce_get_availability', 'custom_get_availability', 1, 2);

function custom_get_availability( $availability, $_product ) {
  global $product;
  $stock = $product->get_total_stock();

  if ( $_product->is_in_stock() ) $availability['availability'] = __('In Stock', 'woocommerce');
  if ( !$_product->is_in_stock() ) $availability['availability'] = __('Stock Out', 'woocommerce');

  return $availability;
}
```
2. Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
h2.woocommerce-loop-product__title.etheme-product-grid-title {
    min-height: 55px;
}
```
https://prnt.sc/bfFQICzpZsOc

Hope it helps!
#417755 Copied
Drishti

Participant

October 9, 2024 at 21:55

Thanks, Luca.

I hope you’re doing well. I would like to inquire if there is a way to set a minimum height between the product image and the product title on my website.

I have added custom tags between the product image and the title, and when these tags are not present, it causes the height of the product sections to become inconsistent.

Setting a minimum height would help maintain uniformity across the product listings, regardless of whether the tags are displayed.

Thank you for your assistance! Please let me know if you need any further information.

Files is visible for topic creator and
support staff only.

#418054 Copied
Luca Rossi

Support staff

October 11, 2024 at 06:19
Hi @Drishti,

Please also add this custom CSS:
```
.etheme-product-grid > .etheme-product-grid-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
```
Result: https://prnt.sc/wp-fAzfYTjeX

Hope it helps!
#418232 Copied
Drishti

Participant

October 11, 2024 at 09:49

Thanks, Luca.

It is working fine on the product grid but not on the Product carousel. Please look into the attached screenshot.

Files is visible for topic creator and
support staff only.

#418268 Copied
Luca Rossi

Support staff

October 12, 2024 at 14:15
Hi @Drishti,

Can you please update the previous custom CSS codes to this?
```
.etheme-product-grid > .etheme-product-grid-item,
.swiper-slide > .etheme-product-grid-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.swiper-slide > .etheme-product-grid-item {
    min-height: 640px;   
}
```
Hope it helps!
#418398 Copied
Tagged: best selling woocommerce themes, product grid customization, single product page customization, woocommerce product customization request, woocommerce themes customization
Viewing 6 results - 1 through 6 (of 6 total)