How to Change the Size Chart Popup Button Position in WooCommerce

Using the Advanced Product Size Charts for WooCommerce plugin, you can control where the Size Chart pop-up button appears on the product page. This allows you to place the button before or after the Add to Cart button, or in other supported positions, based on your store layout and conversion strategy.

Introduction

The Size Chart pop-up button (for example, “Size Chart” or “View Size Guide”) helps customers check measurements before purchasing.

Placing this button in the right position improves visibility and usability.

The plugin allows you to change the popup button position without any coding.

Where the Size Chart Popup Button Is Controlled

The popup button position is managed from:

Size Chart → Settings → Global Settings → Pop-Up Settings

Changes made here apply globally to all size charts, unless overridden by custom CSS.

Step 1: Open Size Chart Global Settings

1. Log in to your WordPress Dashboard
2. Go to Product Size Chart → Settings
3. Click on the Global Settings tab

You will now see multiple sections related to styling and pop-up behavior.

Step 2: Locate the Pop-Up Settings Section

Scroll down to the Pop-Up Settings section.

This section controls:

• Popup button position
• Popup label color
• Custom CSS class for the button

Step 3: Change the Popup Button Position

In Pop-Up Settings, find the option:

Chart Label Position

From the dropdown, select where you want the Size Chart pop-up button to appear.

After selecting the desired position, save the settings.

Available Popup Button Positions Explained

You can choose from the following options:

1. Before the Add to Cart Button

• The Size Chart button appears above the Add to Cart button
• Best when sizing information is critical before purchase

2. After the Add to Cart Button

• The button appears below the Add to Cart button
• Common and clean layout for most WooCommerce themes

3. After Product Meta

• Displays below the SKU, categories, and tags
• Useful for minimal product layouts

4. Before Summary Text

• Appears near the product title and price
• Good for high visibility without interrupting purchase flow

Choose the position that best matches your theme and user behavior.

Save & Preview Changes

1. Click Save Changes
2. Open any product page that has a size chart assigned
3. Confirm that the pop-up button now appears in the selected position

No page refresh or cache clearing is usually required.

Common Use Cases

• Fashion stores: Place before Add to Cart to reduce size-related returns
• Simple products: Place after Add to Cart for a clean UI
• Minimal themes: Use “Before Summary Text” for better visibility
• Advanced styling: Combine with custom CSS for brand consistency

Conclusion

Changing the Size Chart pop-up button position is a simple but powerful customization. With just one setting, you can control whether the button appears before or after the Add to Cart button, improving visibility and customer experience.

This flexibility helps you align the size chart with your store’s design and conversion goals.

FAQs

1. Does this change apply to all products?

Yes. The pop-up button position is a global setting and applies to all products using size charts.

2. Can I set different positions for different products?

Not by default. However, you can use custom CSS classes to override positioning for specific products.

3. Why is the pop-up button not visible after changing the position?

Check that:

• A size chart is assigned to the product
• The popup display style is enabled
• The label color contrasts with the background

4. Will this work with all WooCommerce themes?

Yes. The popup button positions are compatible with most WooCommerce-compatible themes.

5. Do I need to use custom code to change the position?

No. Everything can be done directly from the plugin settings.