---
title: "Fix Add To Cart Button In Flatsome Theme"
source: "https://docs.nexcess.com/software/kadence/iconic/show-single-variations/fix-add-to-cart-button-in-flatsome-theme/"
description: "If you're using Flatsome and WooCommerce Show Single Variations together, you may have noticed a slight display issue when using the \"product box\" add to cart b…"
vertical: "Software"
area: "Show Single Variations"
date: "2021-03-25"
last_modified: "2026-07-02"
---

# Fix Add To Cart Button In Flatsome Theme

If you’re using Flatsome and WooCommerce Show Single Variations together, you may have noticed a slight display issue when using the “product box” add to cart button placement:![Flatsome product box setting](https://docs.nexcess.com/wp-content/uploads/2026/06/Flatsome-product-box-setting.png)

It probably looks something like this:![Flatsome theme product listing](https://docs.nexcess.com/wp-content/uploads/2026/06/Flatsome-theme-product-listing.png)

First of all, add the following code snippet:

```
function iconic_add_to_cart_button_text( $text, $product ) {
	return '<div class="cart-icon tooltip absolute is-small" title="' . esc_attr__( 'Select options', 'woocommerce' ) . '"><strong>+</strong></div>';
}

add_filter( 'iconic_wssv_add_to_cart_button_text', 'iconic_add_to_cart_button_text', 10, 2 );
```

Make sure to activate this on the frontend only, and that you click **Save and Activate** when you first save it using the Code Snippets plugin.

![example of code snippets plugin](https://docs.nexcess.com/wp-content/uploads/2026/06/example-of-code-snippets-plugin-1024x739-1.png)Almost there! We just need to add some CSS to mimic what the theme is doing for the other buttons:![example after code added](https://docs.nexcess.com/wp-content/uploads/2026/06/example-after-code-added.png)

Go to **Appearance > Customize > Additional CSS** and add the following code:

```
body .jck_wssv_add_to_cart {
	width: 0;
	margin: 0;
}
```

Click **Save & Publish**, and you’re good to go:

![finished result looking good](https://docs.nexcess.com/wp-content/uploads/2026/06/finished-result-looking-good.png)