WooCommerce Product Button Text & Mobile Alignment

  • Resolved kayla

    (@kaylaz)


    7 years, 11 months ago

    Hello,

    How do I change the text of the WooCommerce product buttons? Specifically, I am looking to change the text on the button for free items from “Read More” to “Listen Now”.

    Also, the product buttons appear in different places on the desktop and mobile versions. I added extra CSS to make the product buttons align on the desktop but noticed on the mobile that the product buttons are far from the product image. I would like the buttons to align on both mobile and desktop and be near the price of the product.

    /*WooCommerce Shop Button Alignment*/
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {min-height: 525px !important; margin-bottom:10px; }
ul.products li.product a.button {position: absolute !important; bottom: 100px; }

    Someone recommended using this code instead, but I am waiting for their response on how to use it as the ways I tried were not working.

    .woocommerce ul.products li.product .button {
    margin-top: 0;
}

    Thank you!

    https://www.funkydreamerstorytime.com/shop

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

  • To change the button text for free items, try this snippet:

    <?php
add_filter ('woocommerce_product_add_to_cart_text', 'custom_button_text', 40, 2 );
add_filter ('woocommerce_single_product_add_to_cart_text', 'custom_button_text', 40, 2 );
function custom_button_text ( $button_text, $product ) {
  $price = $product->get_price();
  if ( $price == 0 ) {
     $button_text = 'Listen more';      
  }
  return $button_text;
}

    The code goes in functions.php for your child theme or you can use the “My Custom Functions” plugin.

    I’d try a single column layout in mobile view with this custom css:

    @media only screen and (max-width:768px ) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .woocommerce ul.products li.product:nth-child(2n),
  .woocommerce-page ul.products li.product:nth-child(2n) {
    float: none;
    width: 85%;
    margin: auto;
  }
}

    and I should lose this from custom css as its putting the button in the wrong place sometimes:

    ul.products li.product a.button {
  position: absolute !important; 
  bottom: 100px; 
}
    Thread Starter kayla

    (@kaylaz)

    It all worked! Thank you so much!

    And thank you for the cheaters plugin for PHP! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WooCommerce Product Button Text & Mobile Alignment’ is closed to new replies.