fbpx
Want To Add Extra Images Per Product Variation? Download This Free Plugin

Archive Display position Before Add to Cart in Salient Theme

Rob Grabowski

Hello,

I am in need of Archive Display position Before Add to Cart in “Salient” WordPress Theme.

Screenshots attachedScreen Shot 2025-02-21 at 1.23.52 PM.pngScreen Shot 2025-02-21 at 1.23.59 PM.png

Hakik Zaman

Hi Rob,

Thanks for reaching out to us.

I have added a snippet using a plugin called Code Snippets.

Here is the snippet:

add_action('woo_variation_swatches_pro_archive_page_loaded', function($wvs_pro){
remove_action('woocommerce_init', array( $wvs_pro, 'enable_swatches' ), 1);
add_action('woocommerce_after_shop_loop_item_title', array( $wvs_pro, 'after_shop_loop_item' ), 9);
}, 10, 1);

Now it displays like this screenshot from my end.

Please check and let me know. Hope to hear from you soon.

Thank You

Rob Grabowski

Hello,

Nice! Is it possible for it to be directly under the image and not in between the title and price? That would be perfect.

Thank you!

Hakik Zaman

Hi Rob,

I have modified the snippet like the following:

add_action('woo_variation_swatches_pro_archive_page_loaded', function($wvs_pro){
remove_action('woocommerce_init', array( $wvs_pro, 'enable_swatches' ), 1);
add_action('woocommerce_shop_loop_item_title', array( $wvs_pro, 'after_shop_loop_item' ), 9);
}, 10, 1);

Now it displays like this. Please check and let me know your feedback.

Hope to hear from you soon.

Thank You

Rob Grabowski

This is perfect! Now the only issue I believe is on the “related products” underneath on the single product page. I think this caused an issue or conflict with that loop as this was not happening before. Is there a way to query the function only on the archive?

Thank you!!

Hakik Zaman

Hi Rob,

The issue is coming from your theme. Your theme is targeting all the <li> elements. It is not about the snippet. For a test, you can temporarily disable the snippet.

You can try the following CSS:

/* GetWooPlugins Support #164766 */
body .woocommerce .nectar-woo-flickity .flickity-slider .flickity-cell li:not(.woo-variation-items-wrapper, .variable-item) {
width: 100%!important;
}
body .woocommerce .nectar-woo-flickity .flickity-slider li:not(.woo-variation-items-wrapper, .variable-item), body .woocommerce .nectar-woo-flickity ul.products[data-product-style=material] li:nth-child(2n+2):not(.woo-variation-items-wrapper, .variable-item) {
margin: 0!important;
}

You can send the above CSS to your theme support to exclude our classes. I have tried the CSS but somehow they pushed it using JS. You can also check here, I have tried the above snippet using the browser inspect and it is working well.

Thank You

Rob Grabowski

Ahh yes I see now this is CSS. I was able to resolve this by targeting the elements specifically on the single product page inside the li elements.

I do have one last question though! I noticed that the product hover effect seems to be conflicting now that this plugin is installed. The products in the archive should show the first gallery image on hover but it seems to only work momentarily or sometimes not at all. I would say most of the time it works once and then doesn’t work again until page refresh. This feature does work and continue to work on products without variations like the “Pancho’s Poncho” – is this a setting or would this be a conflict?

It would also be ideal to click the thumbnail and see the variation as the main image rather than going to the single product page – is there a setting for this?

Thank you for all the help so far!

 

 

Hakik Zaman

Hi Rob,

 I noticed that the product hover effect seems to be conflicting now that this plugin is installed.

I have added the necessary image selector as per your theme setup. Now, it will display the second image on hover over the product thumbnail.

It would also be ideal to click the thumbnail and see the variation as the main image rather than going to the single product page – is there a setting for this?

It is happening for your theme architecture. They have added the hooks inside the <a> tag. You already know, <a> redirects and it’s linked to the single product page. If they have a hook outside of the <a> tag it wouldn’t happen.

I hope it will clear up your confusion.

Thank You

 

Rob Grabowski

Okay no problem! I think I’m all set then thank you for all the help!!