Centering Out of Stock Text at single product page

  • Resolved Ivan

    (@zettz)


    7 years, 11 months ago

    Hi there,
    I already looked at google and at the forum on how to centering the out of stock text, but I only found on how to change the text.
    I already tried using css

    p.stock.out-of-stock{
text-align:center;
}

    but, no change at all, even after refreshing the page using CTRL+F5.
    I know the trigger is from variable.php
    <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

    I tried to use the old HTML 4.01 <center>, the Out of Stock text will go to the center, but the content below it too. If I use </center>, it’ll be back to left align again.

    Is there a way for centering the text? And also, I can’t provide with the link, I still need to fix some css before make the web online.
    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Markup and styles vary between themes. Can you say which theme you are using?

    Thread Starter Ivan

    (@zettz)

    Hi there, I use “Eightstore-lite”, but the variable.php is woocommerce default.

    With added function:

    add_filter( 'woocommerce_get_availability', 'stock_custom_get_availability', 1, 2);
function stock_custom_get_availability( $availability, $_product ) {
    
    // In Stock Text
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('In Stock', 'woocommerce');
    }
    // Out of Stock Text
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('<strong>Need restock? Call us</strong>', 'woocommerce');
    }
    return $availability;
}
    p.stock.out-of-stock{
  text-align:center;
}

    worked for me.

    Possible reasons why it didn’t work for you are:

    1. There was a parse error in some other style in the same section, so this bit wasn’t read. Validate all your custom css using this service:
    https://jigsaw.w3.org/css-validator/#validate_by_input

    2. Your custom css was overwritten by something that loaded later in the page.
    Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS
    This loads last so styles here takes precedence.

    3. There is some other style affecting this, so you need to make your style more !important.

    4. Make sure you are not running a cache plugin or cache service.

    Note that you shouldn’t have the strong tags inside the __() function. They will get translated and served as plain text, not used as a tag.

    So:

    p.stock.out-of-stock {
  text-align:center !important;
  font-weight:bold;
}

    If you don’t get it working, just come back when you’re live. This stuff is much easier with browser tools!

    Thread Starter Ivan

    (@zettz)

    It works now,
    I just need to add the !important

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Centering Out of Stock Text at single product page’ is closed to new replies.