Return to previous page

Swatch image thumbnail size ratio + product filters

This topic has 10 replies, 2 voices, and was last updated 1 years, 2 months ago ago by Rose Tyler

Enjin

Participant

January 31, 2023 at 09:58

Hello,

I have two questions…

1- In my store we use a custom ratio for product images (16:9). All images are cropped accordingly, as set in the theme options.

But I would like to do the same with the swatch thumbnails… They’re all automatically set to 1:1 ratio, but I would like them to be 16:9, size 150px width, 100px height. If I upload a 16:9 image, it automatically crops it… when I just want it to have the same aspect as the other images.
The desired layout : https://prnt.sc/44BdVrMGXER7
The current one : https://prnt.sc/G1jEOOZqj6zQ

Can you help me with this ?

Second question :
2- I wanted to have this layout https://prnt.sc/WYXPdNk8MTSo for the product filters. I assumed it was possible, but it seems like it won’t work in ajax… For now I did this : https://prnt.sc/ECO5XsUhSEq0. I think I will manage to modify the CSS to approach the desired result, but it would be great if it was possible to have the elementor style in the theme options…
Is there any way to have the search working in ajax like the other product filters (finitions, bois, forme…) ?

Thank you in advance for your time and help.

Please, contact administrator
for this information.

#345560 Copied Theme version: 9.0.3 WooCommerce version: 7.3.0

9 Answers
Rose Tyler

Support staff

January 31, 2023 at 11:56
Hello, Enjin

1/ We added next filters in your xstore-child/functions.php -> https://prnt.sc/m_txHuHsmLAi
```
// loop product image swatch size
add_filter('sten_wc_archive_loop_image_swatch_size', function() {
return 'woocommerce_thumbnail';
});

// single product image swatch size
add_filter('sten_wc_single_image_swatch_size', function() {
    return 'woocommerce_thumbnail';
});
```
Also, we improved your CSS styles for those images ->
before: https://prnt.sc/-z3jLxmzxLPh
after: https://prnt.sc/52unoaUZf8wm and https://prnt.sc/F7EzvRvZWO2G

2/ Product filtes widget was created for Elementor product builder as extension to use product filters from any page and redirect the customer to filtered products on shop. We did think about ajax feature but for making it work we understood it will create different issues and requires bad coding practice which we would like to avoid in our projects.
Here is another example of Product widgets widget on our demo -> https://xstore.8theme.com/elementor/demos/book-store/ https://prnt.sc/eZKbfp7F8fUQ

Kind Regards,
8theme team
#345583 Copied
Enjin

Participant

January 31, 2023 at 16:17

Hello Rose,

Thank you for the quick answer. That’s exactly what I needed, thank you.
I understand for the product filters, I’ll stay with the default behavior.

Best regards !

#345619 Copied

Rose Tyler

Support staff

January 31, 2023 at 16:40

Hello, Enjin

You’re welcome!
Would you mind to rate our product – https://themeforest.net/downloads
We’d appreciate if you could take a moment to give us 5-stars on ThemeForest!

Kind Regards,
8theme team

#345624 Copied

Enjin

Participant

February 2, 2023 at 17:36

Hello,

Sure we’ll do !

I just noticed that while your hook works perfectly in products, in my filters it stills show a square cropped image… see here : https://sebastiengeslin.enjin.fr/collection/lunettes-de-vue/, if you click on “finition”. Is it possible to adapt it the same way ?
Finally I have a last (I hope !) question. I like the fact we can add a secondary description on product categories. I created acf fields to display also a title, subtitle, and a banner for this secondary description. But all my attempts to display the acf (through functions or archive-product.php) have been in vain. On other websites we never had an issue displaying acf on archive products, any idea what could be the cause ? Am I editing the wrong files ?

Thank you a lot for the help.
Kind regards

#345884 Copied
Rose Tyler

Support staff

February 3, 2023 at 08:37
Hello, Enjin

1/ We added one more filter in your child-theme/functions.php
https://prnt.sc/NOgqn7DCzRi8
```
add_filter('sten_wc_filter_image_swatch_size', function() {
    return 'woocommerce_thumbnail';
  });
```
now your filter widget looks much better -> https://prnt.sc/pmHMaEtId-nK
2/ Could you provide us more information with screenshots about your idea to output acf fields. Also, as I see you have modifications in your child-theme/functions.php -> https://prnt.sc/PFUmNnaFYyS8, so, please check if works without your customizations of removing hooks. By default we output
woocommerce_archive_description
hook in place according to this option https://prnt.sc/6qBooH7j0lmp which you may find in archive-product.php -> https://prnt.sc/06BHXTiTWSs5 (and below)

Kind Regards,
8theme team
#345930 Copied
Enjin

Participant

February 3, 2023 at 10:28
Hello,

Thank you for the swatch filter, it’s perfect.

For the acf field, I created 3 fields : https://prnt.sc/5jC2qtYsXPzs, to display on taxonomy product_cat (one title, one subtitle, one image).
The desired outcome is to display them with the secondary description, after the products : https://prnt.sc/xfpL0riJJxB3

I tried removing my hooks as you suggested (https://prnt.sc/PFUmNnaFYyS8) but it doesn’t affect the secondary description, only my top page.
I wanted to edit the function etheme_second_cat_desc() to add my acf in the div :
```
  /* Modification description basse produits */

  if ( ! function_exists( 'etheme_second_cat_desc' ) ) {
    function etheme_second_cat_desc() {
      global $wp_query;
      $cat = $wp_query->get_queried_object();

        /* My ACF */
        $titre_bas = get_field('titre');
        $sous_titre = get_field('sous-titre');
        $img_bas = get_field('image_sous_produits');
      
      if ( property_exists( $cat, 'term_id' ) && ! is_search() ) {
        $desc = get_term_meta( $cat->term_id, '_et_second_description', true );
      } else {
        return;
      }
      
      if ( ! empty( $desc ) ) {
        echo '<div class="bloc_bas"><div class="term-description et_second-description test">' . $titre_bas . $sous_titre . do_shortcode( $desc ) . '</div><div class="banner-bas" style="background-image: url('.$img_bas.');"></div></div>';
      }
    }
  }
```
It seems like the acf are not passed through product_cat, and I haven’t faced that issue before, with the previous themes we used…

Thank you for the much appreciated help !

Kind regards
#345949 Copied
Rose Tyler

Support staff

February 3, 2023 at 13:18
Hello, Enjin

Thanks for details!
As we found in next article -> https://support.advancedcustomfields.com/forums/topic/get-custom-taxonomy-field-value/
Support it may be needed sometimes to change get_field('field_name') with next structure get_field('titre', $taxonomy . '_' .$term_id)
We changed the code in your functions.php and here it is ->
```
if ( ! function_exists( 'etheme_second_cat_desc' ) ) {
    function etheme_second_cat_desc() {
      global $wp_query;
      $cat = $wp_query->get_queried_object();

      $desc = '';
      if ( property_exists( $cat, 'term_id' ) && ! is_search() ) {
        /* My ACF */
        $titre_bas = get_field('titre', $cat->taxonomy . '_' .$cat->term_id);
        $sous_titre = get_field('sous-titre', $cat->taxonomy . '_' .$cat->term_id);
        $img_bas = get_field('image_sous_produits', $cat->taxonomy . '_' .$cat->term_id);
        $desc = get_term_meta( $cat->term_id, '_et_second_description', true );
      } else {
        return;
      }

      if ( ! empty( $desc ) ) {
        echo '<div class="bloc_bas"><div class="term-description et_second-description test">' . $titre_bas . $sous_titre . do_shortcode( $desc ) . '</div><div class="banner-bas" style="background-image: url('.$img_bas.');"></div></div>';
      }
    }
  }
```
Code file -> https://prnt.sc/kDdiLW8fobWs
Backend -> https://prnt.sc/9djdbpMNz542
Frontend -> https://prnt.sc/Kcn2yBy0CYsh
We hope you find the code snippet above useful and you are satisfied with the result!

Kind Regards,
8theme team
#345958 Copied
Enjin

Participant

February 6, 2023 at 09:45

Hello Rose,

Awesome, it works perfectly, thank you a lot for your help. Great theme and top support!

Best regards

Clémence

#346126 Copied

Rose Tyler

Support staff

February 6, 2023 at 09:52

Hello, Enjin

We would be grateful if you could take a moment to rate our product – https://themeforest.net/downloads – with 5 stars on ThemeForest!

Kind Regards,
8theme team

#346129 Copied
Tagged: best selling, product-filters, ratio, swatch image, themes, thumbnail size, woocommerce
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Swatch image thumbnail size ratio + product filters’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

jQuery is not defined / Detected container element removed from DOM

2 years, 2 months ago
splash image

2 years, 5 months ago
Xstore product page image

2 years, 10 months ago
the logo on the mobile

2 years, 11 months ago
Can't import elements from studio

3 years, 3 months ago
Small responsivity problem

3 years, 3 months ago
Progress Bar Not Working

3 years, 4 months ago
quick view ietm quantities

3 years, 6 months ago
Search engine not working properly

3 years, 6 months ago
Unable to activate the theme

3 years, 8 months ago

Swatch image thumbnail size ratio + product filters

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection