Product Button & Boxes on Product Pages

Home Forums Monument Valley Product Button & Boxes on Product Pages

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18687

    christophertong
    Participant

    Product Button & Boxes on Product Pages

    Resolved

    Attached image refers.

    1. When Product Title falls to 2 liners, my “Add to Cart” button stick on the box outline base. How can I make them same space like the right side image?

    2. How can I make the space of 2A and 2B narrower?

    3. The “Read More” button is actually a “Sold” button. How can I,
    a) make buton auto width and align center
    b) adjust space between button and price
    c) change “Read More” to “Sold” since it’s a sold/out of stock status

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #18689

    Oliver Juhas
    Keymaster

    Hi christophertong,

    1. As you have modified the theme default products display, could you please provide the affected website URL so I can check personally and provide solution?
    2. Again, I need affect website URL here please.
    3. For button styling issue I would need your website URL. For changing text, this is a WooCommerce related question actually, the theme has no control over the text. You can try using a plugin to change it or add this code into your child theme‘s functions.php file:
      function child_theme_add_to_cart_text( $text, $product ) {
        if ( ! $product->is_purchasable() || ! $product->is_in_stock() ) {
          $text = 'Sold out';
        }
        return $text;
      }
      add_filter( 'woocommerce_product_add_to_cart_text', 'child_theme_add_to_cart_text', 10, 2 );

    Best regards,

    Oliver Juhas
    WebMan Design

    #18690

    Oliver Juhas
    Keymaster

    Hi,

    I was actually able to get your website URL from one of your previous support tickets. So here are solutions:

    1. I can see you are using some plugin to display your products now. Is this help still required? I do not experience such issue in the theme, so, to test and provide solution I would need to ask you to return to previous products layout on your website where the issue occurred and I can check your custom shop styles and provide solution (or see “Tip:” below).
    2. This space actually depends on the highest product box in a row. However, you can tweak it a bit applying this custom CSS and see how that works for you:
      ul.products .product .description {
        padding-top: 1em;
        padding-bottom: 1em;
      }
    3. I can’t see the button on your website. Can you please provide URL where I can find it so I can check your custom styles and provide solution? However, I’ve checked the styles I’ve provided for you in previous support ticket and they work perfectly fine even for “Read more” product button. Have you modified the styles somehow?

    Tip: I can also see the related products displays the “Add to cart” button on the product box border. This is because you have zeroed out the bottom margin for custom button styles I’ve provided for you in previous support ticket. I think this might also resolve your question #1.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18692

    christophertong
    Participant

    This is a private reply!

    This reply has been marked as private.
    #18693

    Oliver Juhas
    Keymaster

    Hi Christopher,

    1A. Please note that you didn’t have to make any changes to the actual page – the custom CSS code to style add to cart buttons works globally, regardless the page you are on. And, like I’ve mentioned in my previous reply, you have removed the bottom margin from the styles I’ve provided, that’s why the button touches the product box border.

    1B. In that case just apply the bottom margin on buttons on single product pages like so:

    .single-product ul.products .product .button,
    .single-product ul.products .product .added_to_cart {
    	margin-bottom: 1rem;
    }

    3. This is actually an interference with your WooPack plugin styles. Please understand that I provide solution only for my theme and the CSS code I’ve provided in your previous ticket works perfectly fine. Except now it’s getting overridden by WooPack styles too. So I suggest adding this additional custom CSS to fix:

    ul.products .product .woopack-product-action .button, ul.products .product .woopack-product-action .added_to_cart {
    	display: inline-block;
    	margin: 0;
    }

    Also, please note that there is some “microthemer-css” stylesheet loaded on your website that actually might interfere with the style fixes I’ve provided here. For example the 2A space from your screenshot is actually also affected by the bottom margin applied on the product image and top margin applied on the product title by this stylesheet. Not sure where the stylesheet is coming from – maybe you are using some plugin?

    Please try using your browser code inspector to determine the custom CSS fixes you need to apply.

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.