Help with configuring various Woocommerce Pages

Support
#1

Hello,

i need some help again with some of the anomalies on my Woocommerce Pages. Some were fixed previously, but the issues came up again.

  1. On our Shop Page and Categories Pages, there seems to be some kind of border around the Item name and price. It was removed previously but for some reason it came back. How do it go about removing the lines around them?

  1. Whenever i add something into cart or whenever there is a notice bar that appears on the top, for some reason there is a blue tint (maybe a secondary background fill) and a shadow. How do i go about removing the blue tint and the shadow?

  1. For the Product Pages, how do i get the Categories to be same alignment but appear under the Add to Cart button?

  1. On the My Account Page (Account Details), My Account Page (Main), Checkout Page (Sign in) and Checkout Page (Billing details), most of the background color for the fields are good. White with thin black border. However some fields like the Password and Phone are in different colors. How to i get them to appear like all the other fields (White with thin black border)?



  1. Is there anyway to add a line divider between the Login and the Register section on My Account Page?

  1. Lastly, how can i remove the lines between the products that are in my Cart?

That’s quite a fair bit to ask, and i really appreciate all the help and support from you guys!

Thanks!!

#2

Website Link: www.spinworkx.com/main/shop

#3

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

/* 1 */
.woocommerce li.product {
    box-shadow: none;
}
/* 2 */
.woocommerce-message.x-alert.x-alert-info.x-alert-block {
    border: none;
}
/* 3 */
.product_meta {
    clear: both;
}
/* 4 */
.woocommerce input[type="tel"],
.woocommerce input[type="password"] {
	background-color: #fff;
	border-color: #000;
}
/* 5 */
form.woocommerce-form.woocommerce-form-login.login {
    border-bottom: 1px solid #000;
    padding-bottom: 25px;
    margin-bottom: 25px;
}
/* 6 */
tr.woocommerce-cart-form__cart-item.cart_item td {
    border-top: none;
}

form.woocommerce-cart-form thead th {
    border-bottom: 1px solid #000
}

Hope it helps :slight_smile:

#4

Hi @thai ,

thanks so much for the help!

Everything works. For some strange reason, if i add all this to the end of my custom CSS, it doesn’t work. But if i add it all to the top of my custom CSS, it works. Any idea why this happens?

A couple more things i’ll need help with.

  1. On the main SHOP page, and in the product page, how do i change the color of the prices from Red to another color?


  1. For the Checkout alert bar, and possibly other bars like registration, etc. How do i remove the border shadow / that same blue tint?

  1. For My Account Page (Downloads), how do i shift the Go Shop button down below 'No Downloads Available Yet"

  1. For My Account Page (Orders), how do i get the button to be the same button as the Downloads tab button (from point 3 above) and position it below “No order has been made yet”?

And a last question, which may seem a little weird, but is there some kinda of CSS customisation manual for Woocommerce somewhere that i can read/look at so i dont have to keep troubling you guys to help?

Thanks again!

#5

Hi There,

Please also add this custom CSS:

.woocommerce .price>.amount, .woocommerce .price>ins>.amount {
    color: #57a4ff;
}

.woocommerce-info.x-alert {
    border: none;
}
.woocommerce-MyAccount-content .woocommerce-Button.button {
    position: absolute;
    margin-top: 50px;
    margin-left: 0;
    padding: 0.563em 1.125em 0.813em;
    border: 3px solid #fff;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.58), 0 4px 9px rgba(0,0,0,0.75);
}

Hope it helps :slight_smile:

#6

Hi @thai,

everything works excellent!
Thank you thank you!

#7