MoreConvert Documentation

How to Prevent Button Overlapping in Product Listings and Single Product Pages?

Buttons overlapping in product listings and single product pages can be a common issue when you have multiple buttons placed in the same position. Fortunately, we provides two effective solutions to Prevent Button Overlapping.

 

How to Prevent Button Overlapping in Product Listings and Single Product Pages? #

Solution 1: #

The first option is to go to the settings of one of them and try increasing the margin number. The initial value is (10px 0px 0px 0px), where the first value pertains to the top margin. You can increase the margin of one of these buttons separately.

To address the issue, follow these steps:

  1. Navigate to the plugin settings.
  2. Access the button settings for the button you want to adjust. As an example, we will use the Wishlist button.
  3. Go to the Wishlist Button Tab.
  4. Under the Single Product Page or Product Listing section, find the Button Sizes option.
  5. Locate the Margin setting and adjust it to your preference. The initial value is (10px 0px 0px 0px), where the first value corresponds to the top margin.

 

Prevent Button Overlapping in Product Listings and Single Product Pages
Margin option in Single Product Page settings

 

For loop settings (listings), you can do the same from its dedicated settings.

Prevent Button Overlapping in Product Listings and Single Product Pages
Margin option in Product Listing settings

 

Solution 2: #

Another way is to set the buttons in different positions. This way, you can place each button in a different position, for example, one under “add to cart” and one on the picture.

To implement the second solution, follow these steps:

  1. Navigate to the plugin settings.
  2. Access the button settings for the button you want to adjust. As an example, we will use the Wishlist button.
  3. Go to the Wishlist Button Tab.
  4. Under the Single Product Page or Product Listing section, find the Button Position option.
  5. Choose a different position for the button.
Button Position option in Single Product Page settings

 

For loop settings (listings), you can do the same from its dedicated settings.

Button Position option in Product Listing settings

 

Feel free to explore these options and customize the button settings to prevent overlap in both product listings and single product pages.

For more detailed information about button positioning, refer to the “Single Product Page” and “Product Lists” sections in the plugin documentation.

What are your feelings?
Updated on November 15, 2023