Product Variation Pills

Replace the standard WooCommerce product variation drop-downs with user-focused, mobile-friendly radio/pill buttons. Product Variation Pills let you design a cleaner product page and boost the user experience of your store!

Product Variation Pills plugin on a desktop monitor

SKU: N/A Category: Commerce Current: 2.0.11

money-back guarantee sticker

100% No-Risk, Money Back Guarantee!

We're excited to have you experience the power of our plugins. So over the next 14 days, if any Power Plugins aren’t the best fit for your project, simply reach out! We’ll happily refund 100% of your money. No questions asked.

About Product Variation Pills

Product Variation Pills is an easy way to replace the default WooCommerce variable-product drop-down lists with elegant pill buttons.

Just activate the plugin and you’re away – it works straight out of the box.

Product Variation Pills Example 1 — Product Variations as Pill Buttons

Changelog: Product Variation Pills

Version 2.0.11

Released: 2022-05-23

Added a new options to control enable auto-select of variations when only one pill is available.

Version 2.0.10

Released: 2022-05-23

Modified the front-end pill-select logic to play nicer when multiple product attributes are available.

Version 2.0.9

Released: 2022-03-16

Minor update and package-rebuild.

Older releases

Added some new actions and filters.
Tidied up the CSS a little.

NEW HOOKS

do_action( 'before_enqueue_pvpills_scripts' ) fires before the PV Pills scripts/css are enqueued.
do_action( 'after_enqueue_pvpills_scripts' ) fires before the PV Pills scripts/css are enqueued.
add_filter( 'pvpill_label_text', $pill_label_text, $term, $attribute_name) lets you override the text inside the pills.
add_filter( 'pvpill_label_html', $pill_label_html, $term, $attribute_name) lets you override the raw HTML that is rendered inside the pills.

Integrate with Power Plugins updates.

Minor code refactoring.
Added a new function is_pvpills_frontend_required() that can be used to see if PV Pills will be used on the current page.

Minor update

Restructured source files. Cleaner.
Added support for custom product attributes (as variations).

New logic for the frontend. More robust.
Easier to override styles at theme-level.
Detect singleton options (terms) and auto-select them.

Integration with proper update checking and change log.

Initial development release.

Styling the Pills

Here’s a simple example of how to style the pills themselves. Either copy-and-paste this into your custom child theme’s style.css file, or paste it into the Additional CSS in the Customizer. Change the colours to suit your site.

.pv-pills .pill {
    border: 1px solid grey;
}

.pv-pills .pill label:hover {
    border: 1px solid black;
}

.pv-pills .pill input[type="checkbox"]:checked+label {
    background-color: purple;
    color: white;
}

Enable / Disable Pills Dynamically

If you need to disable Product Variation Pills for one or more of your products, you can hook the pvp_is_active filter. Copy and paste this example into your custom child theme’s functions.php and change the values in $disable_for_ids for your products.

/**
 * COnditionally disable PV Pills for some products.
 */
function custom_pvp_is_active($is_active) {
    $product = get_product();

    // Product IDs where you don't want Product Variation Pills.
    $disable_for_ids = array(1234, 9876);

    if (in_array($product->get_id(), $disable_for_ids)) {
        $is_active = false;
    }

    return $is_active;
}
add_filter('pvp_is_active', 'custom_pvp_is_active');

Actions & Filters

Hook	Parameters	Notes
pvp_is_active filter	$is_active	Returns true on single product pages if WooCommerce is installed. You can return false from this if you need to disable pill mode for some products.
pvp_refresh_delay filter	$delay	The delay between the page loading and PV Pills initialising, in milliseconds. Default: 50
pvp_heartbeat_interval filter	$interval	PV Pills runs a heartbeat in the browser to check that the pills are not out-of-sync with what WooCommerce thinks is selected. This configures the heartbeat interval in milliseconds. Default: 250
pvp_enable_diagnostics filter	$is_enabled	Return true from this filter if you want to see WooCommerce’s original drop-down selectors. This can be useful when trying to understand unexpected behaviour.
before_enqueue_pvpills_scripts action		Fires immediately before the PV Pills enqueues its scripts and styles.
after_enqueue_pvpills_scripts action		Fires immediately after the PV Pills enqueues its scripts and styles.
pvpill_label_text filter	$pill_label_text, $term, $attribute_name	The text that’s used for individual pills. By default, `$pill_label_text` will contain `$term->name`. This gets sanitised through esc_html so if you want to inject HTML into the pills, you should use pvpill_label_html instead.
pvpill_label_html filter	$pill_label_html, $term, $attribute_name	The raw HTML that gets inserted inside the pills. By default, this is `esc_html($term->name)`.

PV Pills : WordPress action & filter hooks

Reviews

There are no reviews yet.

Be the first to review “Product Variation Pills”

You must be logged in to post a review.