Header, Shop Page changes

Hello,

Are you able to help me and let me know how to make the following changes:

1. How do we make the “My Account” word and “Wish List” on the top header to be bold?
see image – https://prntscr.com/121yveq

2. How do I align the product title, price and add to cart to the left.
See image: https://prntscr.com/12273dj

3. Mobile nav footer, can you please let me know how to add more space on the bottom of the footer as it is blocked by a line and can’t really see the mobile nav footer menu.
see image: https://prntscr.com/122vr58
Can I have it look more spacious like this, https://prntscr.com/122vs1e

4. Is there a way to get the column on the left to be wider and have it go over the column next to it? I basically want one wide column and then the 3 smaller column footer. How do i achieve this?
see image: https://prntscr.com/122vx80

5. I would like more space on the bottom of every product in the shop page so its more spaced out for desktop, tablet and mobile.

6. Can you please let me know how I can make the product title, product category, price and “add to car” button in shop page to all be bigger font size? All aligned to the left – as requested above.
See image: https://prntscr.com/122×466

7. How do I remove these additional tabs from product page?
See image: https://prntscr.com/122xa2q

Thank you for your help.

Hello,

I saw the screenshots you attached.

1) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-top-bar .wd-tools-element .wd-tools-text {
    font-weight: 800;
    font-size: 15px;
}

2) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-grid-item .wd-entities-title {
    text-align: left;
}

.product-grid-item .price {
    text-align: left;
}

3) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-toolbar {
    height: 65px;
    padding-bottom: 15px;
}

4) You can try to Recreate your footer using the HTML block from there you can set the layout according to your own needs.

5) Please provide with a relevant screenshot of the specific area to check it myself and help you out accordingly

6) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-grid-item .wd-entities-title {
    font-size: 20px;
}

.product-grid-item .price {
    font-size: 20px;
}

7) Please read the woocommerce documentation for tabs in the following link:
https://docs.woocommerce.com/document/editing-product-data-tabs/

Best Regards
Note: Please create a new ticket every time for the new issue on the support system.

Hello,

1. You forgot to provide the code to align the “add to cart” button to the left in shop page.
See image: https://prntscr.com/125188n

2. Can you please let me know how to make Product title, category sub heading and price in shop to be bigger in font size (https://prntscr.com/1251laa). This code you provided doesn’t work

.product-grid-item .wd-entities-title {
font-size: 20px;
}

.product-grid-item .price {
font-size: 20px;
}

3. I would like more space on the bottom of every product in the shop page so its more spaced out for desktop, tablet and mobile. In Shop page after a product, the next product below is too close to the one above – need more space.
See image: https://prntscr.com/122w6fd

4. You said… You can try to Recreate your footer using the HTML block from there you can set the layout according to your own needs.
– If I recreate the footer using HTML block, how can I make the footer menu a dropdown/collapse-able footer menu for mobile?
See image: https://prntscr.com/12520gq

5. How can I make the cart total to be bigger in size?
See image: https://prntscr.com/12529yo

Thank you.

Hello,

I saw the screenshots you attached.

1) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-add-btn.wd-action-btn {
    text-align: left;
}

2) I have visited your website and the code is working fine. Please clear cache and check back.

Screenshot for Clarification: https://ibb.co/9bgTCxs

3) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-spacing-30>[class*="col"] {
    margin-bottom: 40px;
}

4) No it will not be collapsible for mobile.

5) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-header-cart.wd-design-3 .wd-cart-subtotal .amount {
    font-size: 25px;
}

Regards.
Xtemos Studios

Hello,

1. This code, still doesn’t work, the button in shop page is still in the middle
See image: https://prntscr.com/125x1bi

.wd-add-btn.wd-action-btn {
text-align: left;
}

1.2. This worked on desktop but didn’t work on mobile – Font is still small on mobile

.product-grid-item .wd-entities-title {
font-size: 20px;
}

.product-grid-item .price {
font-size: 20px;
}

2. How do I remove “View cart” option.
See image: https://prntscr.com/125vjdk

3. How can I have more space between the product image and the product title in shop page.
See image (area marked with red line): https://prntscr.com/125x1bi

4. Can you please show me how to make the product title and price in side shopping cart and checkout page to be bigger.
See images: https://prntscr.com/125×901 and https://prntscr.com/125xf2b

Thank you.

Hello,

I saw the screenshots you attached.

1) Please replace the previous Custom CSS with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-hover-standard .wd-add-btn {
    text-align: left;
}

1.2) Please make sure that you added the code in the Global Custom CSS area then check back.

2) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

a.button.btn-cart.wc-forward {
    display: none;
}

3) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-grid-item .product-element-top {
    margin-bottom: 20px;
} 

4) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product_list_widget>li .wd-entities-title {
    font-size: 20px;
}

.cart-info span.quantity .amount {
    font-size: 18px;
}

td.product-name {
    font-size: 20px;
}

td.product-total .amount {
    font-size: 20px;
}

Regards.
Xtemos Studios.

Hello,

1. This code still doesn’t work on mobile. Only worked on desktop and it is in Global CSS.

.product-grid-item .wd-entities-title {
font-size: 20px;
}

.product-grid-item .price {
font-size: 20px;
}

It doesn’t seem to be responsive to changes – when I change the font size on the CSS code, the change doesn’t get implemented.

2. Can you please let me know how to remove the add to cart button in shop page.
See image: https://prntscr.com/129qzm6

3. Can get categories sub title in shop page to be aligned to the left please.
See image: https://prntscr.com/129r10u

Hello,

1) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-grid-item.col-6 .wd-entities-title {
font-size: 20px;
}

.product-grid-item.col-6 .price {
font-size: 20px;
}

2) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-hover-standard .wd-add-btn {
    display: none;
}

3) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-grid-item .wd-product-cats {
text-align: left;
}

Regards.
Xtemos Studios

[Author]

Posts