5

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.

starball
  • 20,030
  • 7
  • 43
  • 238
Virik
  • 397
  • 1
  • 4
  • 18
  • 1
    Here is a link to the product. Thank you. Attributes may vary from product to product. We would like to be able to add multiple hidden attributes. https://www.natureventyr.no/vare-reisemal/egypt/ – Virik Aug 23 '17 at 13:21
  • That's not a good solution for us. The best solution if we f.i. could hide all downloadable variables from the dropdown list, and use that option for hidden attributes. – Virik Aug 23 '17 at 17:09

2 Answers2

4

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.edit product attributeproduct attribute 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.term hidden checkbox
  8. Create the variable product with variations made up from the product attributes.add attribute to productadd variation
  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. dropdown with hidden attribute

James Jones
  • 3,850
  • 5
  • 25
  • 44
  • 1
    Hi, Thank you for this detailed reply. I can't select product attributes in 3. It's not an option like that. – Virik Aug 28 '17 at 07:40
  • @Virik Are you creating a custom product attribute within the product? If so, that won't work. In the WordPress admin menu, you should go to `Products->Attributes` and create a attribute of type *select*. Then use that to make variations in the variable product. It should be selectable in the Advanced Custom Fields rules box. – James Jones Aug 28 '17 at 10:00
  • 1
    I've added an attribute called "avgang", and added a variation to a product based on that attribute, but still there is no option in ACF. You can see a screenshot here: https://www.mementor.no/skisser/hidden-product.png – Virik Aug 28 '17 at 12:37
  • @Virik Okay I found something else that can cause a problem. In the options for the attribute tick yes for *Enable archives* - *Enable this if you want this attribute to have product archives in your store.* This makes the attribute 'public' and therefore selectable by ACF. – James Jones Aug 28 '17 at 12:48
  • Great. Now ACF is set up correctly, but it doesn't show in the variation: https://www.mementor.no/skisser/variation.png – Virik Aug 28 '17 at 13:16
  • @Virik That's not where you set whether an attribute is hidden. Go to *WordPress admin navigation->Product->Attributes->Configure terms*. You then create terms and here you'll be able to set the tickbox to hidden or visible. – James Jones Aug 28 '17 at 13:29
  • Hi again. Thanks, I've set the attribute to hidden. Now we have to drop down menus on the product page, one with hidden attributes, and one with normal attributes. I've added your code to function, and replaced the SOME CONDITION part. None of the options are hidden. Actually, I guess we need to hide the entire select? – Virik Aug 28 '17 at 14:05
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153034/discussion-between-james-jones-and-virik). – James Jones Aug 28 '17 at 14:11
0

I'm pretty new here and to playing with code generally, but I used css in the Customizer to hide a variation called "Student:"

.postid-403 option[value=Student]{display: none;}

postid-403 identifies my product page. This seems to be working. Any reason not to do it this way?

Stef
  • 1
  • Because hiding options with CSS is not compatible with IE and more importantly Safari. (you should be seeing your hidden option at an Iphone) – Onur Jun 06 '21 at 17:45