[Support request] Custom CSS

[Renaldo]

Good Evening

I have just started rebuilding my website on generatepress. We were using Shopkeeper before. We are also using one of the pre-built themes inside generatepress. But we need to make some changes

We need help with custom CSS on 3 pieces, please.

1. Product Page
2. Cart
3. Checkout.

[Leo]

Hi there,

Can you provide a bit more details?

What changes are you looking to make?

We are always happy to help if it’s something relatively simple.

Let me know 🙂

[Renaldo]

Hey there

How do we send you screenshot examples of what we need?

[Leo]

You can upload using a service like this:
https://postimages.org/

[Renaldo]

https://postimg.cc/gallery/1sa3a07qc/

[Renaldo]

We have a function inside our product page to give people the option to do direct to checkout and we added a BUY NOW button. the image is shown how it is currently displayed on the website. And need it stacked like the image below. We are focused on mobile first so needs to be responsive for mobile.

PRODUCT SIZE
ADD TO CART
BUY NOW BUTTON

Then we also want the Cart to be displayed as attached. With all the products neatly added with images and text smaller. Especially on mobile where the current theme is not responsive. If you want we can send screenshots of mobile aswell.

Inside checkout, we also want to make changes as showcased on our page currently. Especially the payment box where you need to add your banking details

[Leo]

Can you link me to the site you took the example from?

[Renaldo]

My current website botthms.com and the other one is uk.gymshark.com

Please add products to cart to see the flow. My current website flow is good. And also how gymshark display variation options. I need this the same on your theme.

[Tom]

Something like this would take a considerable amount of time for us to code up. We’re typically happy to help provide CSS support as long as it doesn’t take a large chunk of time.

Perhaps we can do things one by one? For example, adding the product thumbnail to the cart page?

If we can split things up like that one by one, we should be able to accomplish most of it (maybe not all of it, depending on how complex it is).

[Renaldo]

Hey there

Yes I fully understand that. i have never worked with CSS so I am not sure about timelines etc.

I have played around with the font sizes etc, that has already fixed some issues. I think the most important issue right now is the ADD TO CART and BUY NOW button that needs to be fixed.

I have the code already but not everything is compatible with this theme.

/* buy now button */
.woocommerce div.product form.cart,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
margin-bottom: 2em;
display: grid;
}
.single_add_to_cart_button.button.alt,
.product_layout_classic .product_infos form.cart .button,
.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
display: inline-block;
float: none !important;
vertical-align: top !important;
margin-bottom: 10px;
width: 100%;
}
.woocommerce div.product form.cart div.quantity:not(.hidden).custom,
.quantity:not(.hidden).custom,
.quantity.custom {
border: 1px solid #f04e65;
margin: 0px 0px 10px 0px;
padding: 10px 10px !important;
width: 100%;
}
.single_add_to_cart_button.qlwcdc_quick_purchase.button,
.single_add_to_cart_button.qlwcdc_quick_purchase.button.disabled.wc-variation-selection-needed {
background: #222 !important;
color: #fff;
}
.single_variation_wrap {
height: 200px;
}
.variations_form.cart {
margin-top: -40px;
}
.woocommerce div.product form.cart .reset_variations {
font-size: .83em;
float: right;
margin-top: -5px;
}
.single_variation {
position: absolute;
margin-top: -65px;
}

[Renaldo]

Hey Guys

Any update on this? I would like to complete the website over the weekend.

Just need to complete these custom CSS functions

[Tom]

Hi there,

Give this a shot:

.add-to-cart-panel form.cart, 
.woocommerce div.product form.cart,
 .woocommerce-variation-add-to-cart {
    flex-direction: column;
    justify-content: center;
}

.woocommerce div.product form.cart div.quantity {
    justify-content: center;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

.woocommerce div.product form.cart .button {
    margin-bottom: 10px;
}

.woocommerce div.product form.cart .button {
    text-align: center;
}

.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after, 
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before, 
.woocommerce form .quantity.buttons-added .minus, 
.woocommerce form .quantity.buttons-added .plus, 
.woocommerce form .quantity.buttons-added .qty {
    border: 0;
}

[Renaldo]

Awesome that is perfect. Looks great. Thanks a lot.

And for the next option how to add the product thumbnail to the cart page?

Great support as promised.

[Renaldo]

Hey Tom

The CSS you sent fo the product page works great, just one change how can I change the colour of the BUY NOW button Black with white text, so that stands out on the page

[David]

Try this CSS:

.woocommerce div.product form.cart a.single_add_to_cart_button {
    background-color: #000;
    color: #fff;
}

[Author]

Posts