Smart Popup for Product Variations in WooCommerce

Status

Published

Smart Popup for Product Variations in WooCommerce

Learn how to create smart popups for product variations in WooCommerce using the Flatsome theme! Perfect for showcasing extra info, size guides, or product options.

Back to tutorials

Learn how to create dynamic popups for product variations in WooCommerce using the Flatsome theme. This is perfect for adding size guides, extra product info, or unique variation details. Follow these steps to set it up:

Step 1: Add the Snippet to Your Site

Go to WP CodeBox (or use your preferred snippet plugin).
Click Add New Snippet and name it (e.g., "Woo: Variation Popup").
Paste the PHP snippet below:

<?php
function add_inline_script_for_th_label() {
    $disabled_variations = ['']; // Add variation names (e.g., 'pa_color') to disable

    ?>
    <style type="text/css">
        .product-popup-icon {
            background: #4EB7EB;
            color: #fff;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
            float: left;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .product-popup-icon:hover {
            background-color: #2a6cd2;
        }

        .variations th.label label {
            display: inline-block;
            margin: 0;
            line-height: 20px;
        }

        .variations td.value {
            display: flex;
        }
    </style>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var disabledVariations = <?php echo json_encode($disabled_variations); ?>;

            $('table.variations th.label').each(function() {
                var variationName = $(this).find('label').attr('for');

                if (variationName && disabledVariations.indexOf(variationName) === -1) {
                    var popupName = variationName.replace('pa_', 'popup-');

                    if (!$(this).find('.product-popup-icon').length) {
                        $(this).prepend('<a href="#' + popupName + '" class="product-popup-icon">i</a>');
                    }
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_inline_script_for_th_label');

Save and Enable the snippet.
Refresh your product page to see the effect.

Step 2: Create the Lightbox Content

Now that the variation icons are in place, set up the lightbox content.

Go to a product page or the UX Builder.
Add the following shortcode where you want the content to appear:

[lightbox id="popup-color" width="600px" padding="20px"]This is information about the variation[/lightbox]

The id parameter must match the variation name, e.g., popup-color, popup-size.

Step 3: Create a UX Block for Popups

Go to UX Blocks in the WordPress dashboard.
Click Add New, name it (e.g., "Popup Color Content").
Add your content – text, images, or videos.
Publish the block.
Copy the shortcode for the block.

Example:

[ux_block id="popup-color-content"]

Update the Lightbox Shortcode to include the UX Block:

[lightbox id="popup-color" width="600px" padding="20px"]
[ux_block id="popup-color-content"]
[/lightbox]

Step 4: Customize the Icon Using the Snippet’s CSS

The PHP snippet already includes CSS that controls the popup icon’s appearance. You can adjust this CSS directly in the snippet to change the icon’s look and feel.

Go to WP CodeBox (or wherever you added the snippet).
Locate the CSS within the snippet. It’s under the add_inline_script_for_th_label function.

Here’s what you can adjust:

Background color:

.product-popup-icon {
    background-color: #FF5733; /* Adjust to your preferred color */
}

Hover effect:

.product-popup-icon:hover {
    background-color: #FF4500;
}

Size and shape:

.product-popup-icon {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    border-radius: 50%;  /* Keeps it circular */
}

Icon style: The icon is currently just a letter "i". You can replace it with an icon font, a different letter, or even an image.

if (!$(this).find('.product-popup-icon').length) {
    $(this).prepend('<a href="#' + popupName + '" class="product-popup-icon">?</a>');
}

Save the Snippet and Refresh the Page to see the changes.
Repeat the process until the icon looks and behaves exactly as you want.

That’s it. A simple, flexible way to add dynamic popups to product variations in Flatsome. Whether you’re providing extra product info, size guides, or just a little nudge to help customers make a decision, this setup keeps it clean and effective. Take some time to tweak the design and content to fit your brand. And as always, test thoroughly to make sure everything works smoothly.

👨‍💻

Having trouble?

Before reaching out, check out our troubleshooting video because I don’t provide support for Flatsome or WooCommerce-related issues. Other questions? Contact us.

All tutorials

Free conversion kit