Change Positioning of Swatch graphics location

Hi Shagun,

Thanks for reaching us. We are sorry for your inconvenience.

You can center the swatch position from Swatches > Archive/Shop > Swatches align. Check this screenshot.

To change the swatch location, could you send us the latest version of the theme that you are using on your site? We’ll try to investigate your issue by installing your theme on our local setup.

You can upload the theme file in Dropbox or Google Drive and send the download link here directly.

Looking forward to hearing from you soon.

Thank you

Hello Shagun,

Thanks for sharing your theme. Please create a child theme or use code snippet plugin. Then put the below code to your child theme’s functions.php or make a PHP snippet using the code snippet plugin.

function wvs_salient_support(){
   remove_action( 'woocommerce_after_shop_loop_item', 'wvs_pro_archive_variation_template', 30 );
   add_action( 'woocommerce_before_shop_loop_item_title', 'wvs_pro_archive_variation_template', 30 );
}
add_action('init', 'wvs_salient_support');

Note: You can also put it inside your parent theme, but it is not good practice. Because, if you update your parent theme all custom code will be removed.

Please let me know, is it resolved your issue or not. Hope to hear from you soon.

Thanks

Hello Shagun,

Sorry for your inconvenience. You are not using the default shop layout of WooCommerce. You are using WPBakery shop layout.

Unfortunately, there is no hook (inside your theme) to show the swatches before the product title. But you can display it before the product price.

Note: Swatches can be displayed after the product thumbnail and before the product title if you add an action hook to the parent theme. But it is not a wise decision because this change will disappear on each update of your theme.

Please let me know if you want swatches before the product price. Hope to hear from you soon.

Thanks

Hello Shagun Sharma,

I have created two snippets for you here. Please activate them (one by one) and check which one fits your need.

You have customized your parent theme. Therefore, I have overridden your content-product.php and paste the file inside your child theme. Then commented line number 92here.

I hope, it will resolve your issue. If you found my support helpful, my humble request to you to write your beautiful thought here-

here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thank You

Hello Shagun,

You have selected the default value from the backend. Therefore, those items are selected and the clear link is visible.

If you remove the default value that clear will disappear.

If you found my support helpful, my humble request to you to write your beautiful thought here-

here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thanks

Hello Shagun,

You have customized many things and kept clear CSS display: block with !important.

Here is a screenshot for you. I have added the below code to Appearance > Customize > Additional CSS

.archive .variations .reset_variations.woo_variation_swatches_archive_reset_variations {
   display: none !important;
}

Now, the clear link will be invisible.

Thanks