Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – disable out of stock attribute terms

I’m working on an art website that sells printed artworks with a specific print number attribute and various frame options. Each print number has only one unit in stock, and once it’s sold, that number should become unavailable.

I’ve managed to implement the functionality where the product is marked as unavailable after it’s sold. However, the issue is that the option still appears on the shop page, only disabling the "Add to Cart" button once the visitor selects that variation. This can be frustrating for users.

How can I make sold-out print numbers unclickable, blur or dissapear from the shop page entirely?
image showing my shop page product variation
on the image i attached with you print number 1 is sold but it’s still visible on the shop page.

i tried to use some code snippet but none of them worked, i will be glad if you have a plugin recommendation or custom code.

Tags:

2

Answers


  1. 0

    You can hide sold-out variations from your WooCommerce shop page by adding a custom code snippet to your theme’s functions.php file. Here’s how to do it:

    add_filter('woocommerce_variation_is_active', 'hide_sold_out_variations', 10, 2);

function hide_sold_out_variations($is_active, $variation) {
// Check if the variation is in stock
if (!$variation->is_in_stock()) {
    return false; // Make the variation inactive (hidden)
}
return $is_active; // Keep the default behavior for in-stock variations

    }

    add_action('woocommerce_before_shop_loop_item', 'hide_sold_out_variation_buttons', 10);

function hide_sold_out_variation_buttons() {
global $product;
// Check if the product is variable and has variations
if ($product->is_type('variable')) {
    foreach ($product->get_available_variations() as $variation) {
        // Check if the variation is out of stock
        if (!$variation['is_in_stock']) {
            echo '<style>.variations .variation-' . esc_attr($variation['variation_id']) . ' { display: none; }</style>';
        }
      }
    }
}
    Login or Signup to reply.
  2. 0

    For your scenario where you want to make specific product variations (in this case, print numbers) disappear or become unselectable on the shop page when they are sold out, you can approach it in a few different ways. Below, I’ll provide a custom solution as well as a plugin recommendation.

    Option 1: Custom Code to Hide Sold-Out Variations
    You can use custom JavaScript and PHP to make the sold-out variations disappear entirely or blur them out in your shop page. Here’s a custom solution for WooCommerce:

    Step 1: Add a Custom PHP Function
    Add the following code to your theme’s functions.php file or in a custom plugin to filter the product variations based on availability:

    add_filter('woocommerce_variation_is_active', 'hide_sold_out_variations', 10, 2);
function hide_sold_out_variations($is_active, $variation) {
    if (!$variation->is_in_stock()) {
        return false; // This will make sold-out variations inactive
    }
    return $is_active;
}

    Step 2: Style Sold-Out Variations (Optional)
    If you prefer to blur out sold-out variations instead of hiding them, you can add some custom CSS to your theme or plugin’s stylesheet:

    .variation-out-of-stock {
    opacity: 0.5; /* Blurs out the option */
    pointer-events: none; /* Makes it unclickable */
}

    And then modify the PHP function to add a CSS class to the sold-out variations:

    add_filter('woocommerce_dropdown_variation_attribute_options_args', 'add_sold_out_class_to_variations');
function add_sold_out_class_to_variations($args) {
    foreach ($args['options'] as &$option) {
        if (get_post_meta($args['product']->get_id(), 'attribute_' . sanitize_title($args['attribute']), true) === $option && !in_array($option, $args['selected'])) {
            $args['class'] .= ' variation-out-of-stock';
        }
    }
    return $args;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search