Docs

[codexworks]

Hi!

So I found this code in one of the topic. It works and I try to modify that shows only the price when it is available and sold out when it is out of stock.

jQuery ( function($) {

if ( $('.single-product .stock.out-of-stock').length > 0 ) {

$( '.price .amount' ).html( 'SOLD OUT' );

$( '.single-product .stock.out-of-stock' ).remove();

}

} );

jQuery ( function($) {

if ( $('.single-product .stock.in-stock').length > 0 ) {

$( '.price .amount' );

$( '.single-product .stock.in-stock' ).remove();

}

} );

I wonder if I could remove the Available and sold out label under the variable that I chose? Instead just do the function as above?

Here are the screenshots

[codexworks]

Here is the last one for Product that has attributes that is available and sold out.

[Rue Nel]

Hello There,

Thanks for writing in! You may need to use a code something like this:

( function($) {

 $('.variations select').on('change', function(){
  console.log('Changed!');
  check_stock();
 });

 function check_stock(){
  if ( $('.out-of-stock').length > 0 ) {

    $( '.price .amount' ).css('display', 'none');
    $( '.price' ).append( '<span class="woocommerce-Price-amount sold-out">SOLD OUT</span>' );

    $( '.stock.out-of-stock' ).remove();
    $( '.stock.in-stock' ).remove();

   }

   if ( $('.in-stock').length > 0 ) {

    $( '.price .amount' ).css('display', 'block');
    $( '.price .sold-out' ).remove();
    $( '.stock.in-stock' ).remove();

   }
 }

})(jQuery);

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[codexworks]

This reply has been marked as private.

[Lely]

Hi There,

To move it to the left and remove extra spacing, please use this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.woocommerce div.product .summary .single_variation {
    text-align: left;
}
.woocommerce .price {
    margin-bottom: 0 !important;
}
p.stock.in-stock,
p.stock.out-of-stock {
    margin: 0 !important;
}
.woocommerce .cart {
    margin-top: .15em;
}

Hope this helps.

[codexworks]

Thank you so much! 🙂

[Jade]

You’re most welcome.

[Author]

Posts