CODEWITHSUNDEEP
csswordpressbuttonwoocommerceproduct
Jack
Jack

Reputation: 53

Woocommerce buttons, grey area at bottom and filling entire screen

I have a number of issues with my woocommerce pages in my wordpress site that I am hoping someone could help me with. They have been driving me crazy trying to fix.

My theme - Trias - http://www.mojo-themes.com/item/trias-multi-style-corporate-responsive-theme/ does not support woocommerce and this has creatd issues.

  1. First one is the woocommerce pages - category and product fill the entire screen i.e. right to the edge. Any idea how I would change this to be in line with my theme?

  2. At the bottom of these woocommerce category and product pages - the theme ends and you can see grey area beneath the theme area - any ideas on how to prevent this.

  3. Final query and this one is the most annoying - the theme has a floating icon on buttons i.e. a floating small arrow on the left of the arrow before the words start. Problem is on the woocommerce pages - the floating arrow floats above the words on the button. It is super annoying.

My themes button is as:

button,
a.button {
    display: inline-block;
    position: relative;
    margin-top: 30px;
    border: 0 none;
/*  background: #00a3da url("images/button-link-arrow.png") no-repeat 0 50%;*/
    padding: 7px 12px 7px 35px;
    text-transform: uppercase;
    color: #fff;
    font-family: "Oswald";
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;

Please see image of the button with floating arrow: image of button with incorrect floating arrow

Thank you very much in advance for any suggestions at all

Upvotes: 4

Views: 542

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253949

— U P D A T E D —

Add this CSS rules to the style.php file of your active child theme or theme

For your icon buttons :

.button.product_type_variable.add_to_cart_button, 
.single_add_to_cart_button.button,  
button.single_add_to_cart_button, 
.button.wc-forward {
    padding-left: 34px !important;
}
.button.product_type_variable.add_to_cart_button:before, 
.single_add_to_cart_button.button:before,
button.single_add_to_cart_button:before, 
.button.wc-forward:before {
    top: 6px !important;
}

For your content (only woocommerce pages):

.woocommerce .content-wrap {
    width: 934px;
    margin: 0 auto;
    padding: 20px 30px 20px 36px;
}

You will have to add custom media queries and adapt the values of this rules depending on target screen resolutions.

I think that you haven't set correctly your pages (regarding your theme), that's why you have this kind of "content" problems on woocommerce pages:

The best way to solve this kind of issue is to contact author's theme support threads, opening a ticket.

Upvotes: 1

Related Questions