最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Disable -+ buttons on woocommerce product page for product variations when quantity input is hidden in composite pr

programmeradmin1浏览0评论

I am using woo posite products, and for ponent product variations, the maximum quantity is set to 1, so the quantity input field is automatically hidden.

However, the - / + buttons are still there! This looks bad. (not an issue for simple products)

This is the html on the page

<div class="quantity buttons_added" style="">
<input type="button" value="-" class="minus">
<input class="qty" type="hidden" name="quantity" value="1" min="1" max="1">
<input type="button" value="+" class="plus"></div>

and i think this might be the relevant code in the plugin

<div class="single_variation"></div>
<div class="variations_button">
<input type="hidden" name="variation_id" value="" />
<?php
if ( $quantity_min == $quantity_max ) {
if ( $quantity_min == 1 ) {
?>

<div class="quantity" style="display:none;">

<input class="qty" type="hidden" name="quantity" value="1" />

</div>
<?php
} else {
?>
<div class="quantity"><input type="number" class="qty input-text text" disabled="disabled" name="quantity" min="<?php echo $quantity_min; ?>" max="<?php echo $quantity_min; ?>" value="<?php echo $quantity_min; ?>" /></div>
<?php
}
} else
// min-max taken care of by variations code
woomerce_quantity_input( array( 'input_value' => $quantity_min ), $product );
?>

From looking around, I think the solution is to include some custom javascript code, but this is far beyond me. Any help for a Noob would be greatly appreciated.

I am using woo posite products, and for ponent product variations, the maximum quantity is set to 1, so the quantity input field is automatically hidden.

However, the - / + buttons are still there! This looks bad. (not an issue for simple products)

This is the html on the page

<div class="quantity buttons_added" style="">
<input type="button" value="-" class="minus">
<input class="qty" type="hidden" name="quantity" value="1" min="1" max="1">
<input type="button" value="+" class="plus"></div>

and i think this might be the relevant code in the plugin

<div class="single_variation"></div>
<div class="variations_button">
<input type="hidden" name="variation_id" value="" />
<?php
if ( $quantity_min == $quantity_max ) {
if ( $quantity_min == 1 ) {
?>

<div class="quantity" style="display:none;">

<input class="qty" type="hidden" name="quantity" value="1" />

</div>
<?php
} else {
?>
<div class="quantity"><input type="number" class="qty input-text text" disabled="disabled" name="quantity" min="<?php echo $quantity_min; ?>" max="<?php echo $quantity_min; ?>" value="<?php echo $quantity_min; ?>" /></div>
<?php
}
} else
// min-max taken care of by variations code
woomerce_quantity_input( array( 'input_value' => $quantity_min ), $product );
?>

From looking around, I think the solution is to include some custom javascript code, but this is far beyond me. Any help for a Noob would be greatly appreciated.

Share Improve this question asked Mar 26, 2014 at 20:52 user3466055user3466055 311 silver badge2 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

In your css, adding the following rule should hide the +/- option

.minus, .plus
{
    display:none;
} 

OR to remove the quantity box and the +/- options you can do it by:

  • Edit your product
  • Scroll to the "Product Data" section
  • Click "Inventory"
  • Tick the checkbox that says "Sold Individually"

To confirm, setting it to sold individually does do the trick, but if you are using product addons, it has an undesirable side effect of not displaying the the addon totals, etc. The selected addons are included when you add them to your cart though, they just don't display as they normally would on the product page.

A workaround that I found that works is to use CSS that is specific to the posite form. Each posite has a unique ID. So if you are looking to do this only on specific ones, this will work. Example below...

For pre-WooCommerce 2.3:

#posite_form_8594 .quantity, #posite_form_7073 .quantity {display:none!important;}

For WooCommerce 2.3+:

#posite_data_8594 .quantity, #posite_data_7073 .quantity {display:none!important;}

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论