[Support request] Custom CSS

Home Forums Support Custom CSS

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #943244
    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.

    #943246
    Leo
    Staff
    Customer Support

    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 🙂

    #943260
    Renaldo

    Hey there

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

    #943264
    Leo
    Staff
    Customer Support

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

    #943267
    Renaldo
    #943270
    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

    #943284
    Leo
    Staff
    Customer Support

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

    #943298
    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.

    #943325
    Tom
    Lead Developer
    Lead Developer

    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).

    #943336
    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;
    }

    #943720
    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

    #943927
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #943933
    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.

    #943958
    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

    #943960
    David
    Staff
    Customer Support

    Try this CSS:

    .woocommerce div.product form.cart a.single_add_to_cart_button {
        background-color: #000;
        color: #fff;
    }
Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.