WooCommerce - Hide specific variations

Question

How can I hide a variation from the dropdown on a product page, but still let it be purchased through WooCommerce URL coupons?

If I make the variation not active, it is hidden from the drop down, but I get the message "This product can not be purchased" in cart. I just want to hide it from the list, not disable it entirely.

Any help is greatly appreciated.

Thank you!

Answer 1

The following solution worked on my theme, but you're running Bootstrap so you may have issues.

We'll modify the option tag of the options you want hidden with the hidden attribute. Take the following code and add it to your theme's functions.php or a custom plugin:

Custom Code

function custom_woocommerce_dropdown_variation_attribute_options_html( $html, $args )
{
    $product = $args[ 'product' ];
    $attribute = $args[ 'attribute' ];
    $terms = wc_get_product_terms( $product->get_id(), $attribute, array( 'fields' => 'all' ) );
    $options = $args[ 'options' ];
    if ( empty( $options ) && !empty( $product ) && !empty( $attribute ) ) {
        $attributes = $product->get_variation_attributes();
        $options = $attributes[ $attribute ];
    }

    foreach ( $terms as $term ) {
        if ( in_array( $term->slug, $options ) && ***SOME CONDITION***) {
            $html = str_replace( '<option value="' . esc_attr( $term->slug ) . '" ', '<option hidden value="' . esc_attr( $term->slug ) . '" ', $html );
        }
    }
    return $html;
}
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'custom_woocommerce_dropdown_variation_attribute_options_html', 10, 2 );

Note that some browsers don't recognise the hidden attribute. If you want full cross browser compatibility, you'll want to look at the answers at How to hide a <option> in a <select> menu with CSS?. Adding css property style="display:none" may also work with some browsers.

Advanced Custom Fields

Now, in the code above, I've written ***SOME CONDITION***. This condition needs to check whether an option should be hidden or not. To add this information we need to create a custom field for the attribute. You can do this manually, but I do it with the Advanced Custom Fields Plugin (ACF).

1. Create a product attribute in Products->Attributes. Tick yes to Enable Archives? and make it type "Select". Then add the attribute terms under Configure terms.
2. Install Advanced Custom Fields onto your WordPress.
3. Create a new field group.
4. In the field group create a rule to Show this field group if Taxonomy Term is equal to Product **your attribute**.
5. In the field group create a field with field label='hidden', Field Type='True / False' and set the other settings as you like.
6. Publish/Update field group.
7. Go back to the terms you want to hide that you created in step 1. You should have a tickbox to select whether the attribute should be hidden or not. Tick all that apply.
8. Create the variable product with variations made up from the product attributes.
9. In the custom code, remove ***SOME CONDITION*** and replace it with get_field( 'hidden', $term ) ). This is an ACF function which will get the value of the 'hidden' field for that attribute's tern.

After all that, the terms you ticked as hidden should not appear in the dropdown on the product page. In my example you can see green is missing from the dropdown.