Return to previous page

Buttons and other details border radius change

This topic has 23 replies, 3 voices, and was last updated 5 months, 3 weeks ago ago by Andrew Mitchell

Elhadj07

Participant

June 25, 2024 at 21:24

Buttons border radius change.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#401631 Copied Theme version: 9.3.13

22 Answers

Luca Rossi

Support staff

June 26, 2024 at 09:09

Dear @Elhadj07,

We hope this message finds you well. As you are currently in the process of developing your website, we kindly request your assistance in temporarily disabling all caching systems in place. We have recently made updates that are not reflecting on the frontend, and we believe that disabling the cache might resolve this issue.

Thank you for your attention to this matter.

Best Regards,
8Theme’s Team

#401708 Copied

Elhadj07

Participant

June 26, 2024 at 09:16

Hi Luca,

I listed few issues I wanted your support with. Could you please go through them I explained in details and provided screenshot and explained there as well what I need support for.

And explain to me how I can make the changes or if you could make the changes for me as I have provided my logins.

Thanks

#401711 Copied

Elhadj07

Participant

June 26, 2024 at 09:20

Also not all what I mentioned are related to the caching I think.

Thanks

#401717 Copied
Luca Rossi

Support staff

June 26, 2024 at 10:46
Hi @Elhadj07,

1. For the border radius for all the buttons, grid, products, … Please add the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.btn.small.black, .btn.medium.black, .btn.big.black, .before-checkout-form .button, .etheme-above-checkout-form .button, .checkout-button, .shipping-calculator-form .button, .single_add_to_cart_button.button, .single_add_to_cart_button.button:focus, .single_add_to_cart_button.button.disabled, .single_add_to_cart_button.button.disabled:hover, .et-quick-view-wrapper .single_add_to_cart_button.button, .et-quick-view-wrapper .single_add_to_cart_button.button:focus, .et-quick-view-wrapper .single_add_to_cart_button.button.disabled, .et-quick-view-wrapper .single_add_to_cart_button.button.disabled:hover, form.login .button, form.register .button, form.register .button.woocommerce-Button, form.lost_reset_password .button, .woocommerce-EditAccountForm .woocommerce-Button, .empty-cart-block .btn, .empty-wishlist-block .btn, .empty-compare-block .btn, .empty-category-block .btn, .woocommerce-mini-cart__empty-message .btn, .form-submit input[type="submit"], #commentform input[type="button"], .form-submit input[type="submit"]:focus, .my_account_orders .view, .et-quick-view-wrapper .product_type_variable, .et-quick-view-wrapper .product_type_variation, .coupon input[type="submit"], .widget_search button, .widget_product_search button, .woocommerce-product-search button, form.wpcf7-form .wpcf7-submit:not(.active), .woocommerce table.wishlist_table td.product-add-to-cart a, .wcmp-quick-info-wrapper form input[type=submit], .product_list_widget .buttons a, .et-wishlist-widget .wishlist-dropdown .buttons .btn-view-wishlist, .btn-checkout, .mini-cart-buttons .button:not(.btn-checkout), .mini-cart-buttons a, .form-row.place-order .button, .search-full-width form .btn, .xstore-wishlist-action .button, .xstore-compare-button .button, .form-actions .add-all-products, .form-actions .compare-more-products, .form-actions .xstore-wishlist-actions, .form-actions .xstore-compare-actions, .et-cookies-popup-wrapper .cookies-button, body .etheme-checkout-page-next-step, .etheme-checkout-page-steps-footer #place_order, body .etheme-checkout-page-previous-step, .etheme-elementor-cart-checkout-page-coupon .button, .etheme-elementor-cart-checkout-page-login-form .button,
.etheme-product-grid-item,
body .coupon input[type=text],
body .content-product,
.etheme-product-grid-item .footer-inner .add_to_cart_button,
.etheme-product-grid-item .footer-inner a.xstore-wishlist-has-animation
 {
     border-radius: 5px !important;
}
body .coupon input[type=submit] {
    border-radius: 0 5px 5px 0 !important;
}
@media (maxi-width: 600px){
    .etheme-product-grid-item .footer-inner .add_to_cart_button {
        border-radius: 5px 5px 0 0;
    }
    .etheme-product-grid-item .footer-inner a.xstore-wishlist-has-animation {
        border-radius: 0 0 5px 5px;
    }
}
```
2. For the cart & checkout heading size:
```
.cart-checkout-nav {
    font-size: 30px !important;
    text-align: center !important;
}
```
3. To hide the quantity & price on sticky cart form, please add this:
```
.etheme-sticky-cart .quantity,
.etheme-sticky-cart p.price,
.etheme-sticky-cart .single_add_to_cart_button::before {
    display: none;
}
.etheme-sticky-cart .single_add_to_cart_button {
    text-transform: uppercase;
}
```
4. We’ve also copied the black section from home page to footer for you. Now it’s displaying for all the pages.

Best Regards,
8Theme’s Team
#401751 Copied
Elhadj07

Participant

June 26, 2024 at 14:28

Hi Luca, thank you so much for the support.

My question is all the above css you provided I have to add them all at the Global CSS section right ? And anywhere at the Global CSS section is fine ?

Thanks!

#401818 Copied

Luca Rossi

Support staff

June 26, 2024 at 15:14

Hi @Elhadj07,

Yes, you just need to add my custom CSS codes at the end of Global CSS.

Best Regards,
8Theme’s Team

#401850 Copied

Elhadj07

Participant

June 26, 2024 at 15:57

Hi again Luca, I have been able the CSS code you provided and works perfectly thanks very much!

There are few more sections I need the border radius to be changed so that all matches the 5px through out the site.

1- There is a line visible on the header part when scrolling I have included a image to show that.

2- the sticky cart form the price and Wishlist icon still visible on mobile and laptop just the Wishlist Icon visible and I would like that removed please and have add to cart only there.

*** On laptop the BUY NOW Button is green I would like the color changed to : #FF90E7

3- I would like the breadcrumb of shop page to be full width and same size like about page and other pages to match I couldn’t find how to fix that.

4- at the small window for cart page I would like the view cart and checkout to be uppercase and checkout color to be this color code: #FF90E7
Also I noticed on that section the view cart button doesn’t have same length as checkout button.

5- At Recommended and related products section.

a- The ( new, sale and quick view buttons ) the border radius didn’t change to the 5px if you could help with that as well to be 5px.

b- Then ” recommended ” header is a bigger than related products header. If you could help reduce that to same size as related products text size as that one is good.

6- Then on my accounts page buttons border radius 5px as well. I have included images for all and explained there as well.

Thanks very much!

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#401867 Copied

Elhadj07

Participant

June 27, 2024 at 08:40

Hello,

I am still waiting for the support.

Thanks

#401978 Copied
Luca Rossi

Support staff

June 27, 2024 at 08:43
Hi @Elhadj07,

1. We don’t see any lines. Which browser are you using? https://prnt.sc/uE6_sYVdPXZ6

2. It can be changed under Sticky Cart Element when you edit the Single Product Template by Elementor: https://prnt.sc/BpuEH_IL7woE

4. Please add this custom CSS:
```
p.buttons.mini-cart-buttons a.button.btn-checkout.wc-forward {
    background-color: #FF90E7;
}
```
5.a. We’ve updated the custom CSS codes to change the border radius to 5px.
5.b. Both headings are same size for now 40px, please check screenshots:
– https://prnt.sc/Ioderdn5NcPl
– https://prnt.sc/uWI42dJAxnnz

6. https://prnt.sc/u3bLmJjjUK82

Best Regards,
8Theme’s Team

Please contact administrator
for this information.
#401979 Copied
Elhadj07

Participant

June 28, 2024 at 03:54

Hi Luca,

Thanks very much for the support once again.

1 – I think what I was referring to lines on the header is that the products images visible through the sticky header I have included a video recording to show if you could please help fix that I don’t want products visible on sticky header when scrolling up or down.

2 – For the shop page breadcrumb I tried to set layout to full width but not full width and not same high like the about page and other pages breadcrumb.
I would want the shop page breadcrumb to look like the about page breadcrumb so that all matches.

3 – The ADD to cart buttons on recommended and related products section are not uppercase yet and I would want them uppercase as well I can’t find where to change that on elementor.

4 – The black form you helped link to the footer there is a little changes on the placement of the design they are not on the same level anymore and secure payment look smaller and other one are not same level as well. I tried fixing that but couldn’t find how to fix.

5 – I tried removing the quantity part on the single product page next to the add to card button but it’s not removed yet.

Thanks very much!

Please contact administrator
for this information.

#402135 Copied

Elhadj07

Participant

June 28, 2024 at 03:57

Additional files to complete my previous support submission.

Please contact administrator
for this information.

#402136 Copied

Luca Rossi

Support staff

June 28, 2024 at 08:49

Dear @Elhadj07,

We hope this message finds you well. It appears that we did not receive the files you intended to attach. Could you kindly upload your videos or screenshots to Google Drive, or another similar service, and share the link with us?

Thank you for your attention to this matter.

Best Regards,
8Theme’s Team

#402160 Copied

Elhadj07

Participant

June 28, 2024 at 12:00

Hi Luca, I am well I hope you are too? I have uploaded the files I wanted to share on to Google drive please have a look.

Once again thanks for the great support truly appreciated.

Please contact administrator
for this information.

#402197 Copied

Elhadj07

Participant

June 28, 2024 at 17:05

Hi Luca, I already uploaded the files onto Google Drive if you could check and assist please.

Thanks very much

#402270 Copied
Luca Rossi

Support staff

June 29, 2024 at 08:40
Hi @Elhadj07,

1. We’ve checked your website on various browsers but we couldn’t reproduce this issue on our end. Please check the video: https://www.awesomescreenshot.com/video/29088284?key=674c1b3e99e64e05755c0f723d177094

2. We’ve updated the background color of breadcrumb on the shop page for you: https://prnt.sc/0Wzdq_B8TnTy. Since your website is still under development mode, we suggest you to completely DISABLE the Litespeed cache plugin so we can see the changes.

3. We’ve updated the custom CSS codes and the Add To Cart texts are uppercase now: https://prnt.sc/eCzDQu6U6WfE

4. We’ve set the max-height for the images and they look good now: https://prnt.sc/FmG1CMGjRZ4n

5. Please try adding the following CSS codes:
```
.single-product form.cart div.quantity {
    display: none !important;
}
```
https://prnt.sc/4lKTpDPUV4b0

Best Regards,
8Theme’s Team
#402318 Copied
Elhadj07

Participant

June 29, 2024 at 15:15

Hi Luca,

I hope you are well.

Ok I have disabled the caching plugin for now as you suggested.

1 – The Shop breadcrumb high I want it to be like the about page breadcrumb so that all looks same. I have included screenshots for what I mean.

2 – At The related products section on mobile device the add cart buttons now look bigger compared to recommended products section. I have included an a screenshot to show what I mean.

I would to adjust the related products columns to be like recommended products section so that the add to cart buttons won’t change shape on mobile.

3 – I want the add cart text on quickview window to be uppercase as well and to remove the cart icon and just have add to cart in uppercase. I can’t find where to do that from.

Thanks very much for your support.

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#402381 Copied

Elhadj07

Participant

June 30, 2024 at 01:56

Hi again Luca,

Along with the above could you please help with this:

The Wishlist page on the footer menu is not linked to the Wishlist icon.

On the Wishlist page I would like to remove the : “Ask for an estimate” button. I can’t see where to remove it from.

I have included screenshots to saw you what I mean.

Thanks very much!

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#402401 Copied

Elhadj07

Participant

July 1, 2024 at 12:29

Hello Luca,

I hope you are well.

Still waiting for your support regarding the issues I mentioned.

Many thanks

#402561 Copied

Luca Rossi

Support staff

July 1, 2024 at 13:31

Hi @Elhadj07,

Private Content

Best Regards,
8Theme’s Team

Please contact administrator
for this information.

#402575 Copied

Elhadj07

Participant

July 2, 2024 at 01:36

Hi Luca,

I hope you are doing great.

All previous requests been fixed perfectly thanks very much for the support.

For the breadcrumb I set the shop page breadcrumb padding to 10px top and 10px bottom so that the heading will be in the middle.

I tried to set the padding for other pages breadcrumbs ( About, Contact… ) to 10px top and 10px like the shop breadcrumb so that all breadcrumbs matches.

I tried to set from Customize > breadcrumb but It seems as just the top 10px breadcrumb is reflecting on the site.

How can I fix that please so that all breadcrumbs match 10px top and 10px bottom on both desktop and mobile.

Many thanks

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#402642 Copied
Luca Rossi

Support staff

July 2, 2024 at 08:05
Hi @Elhadj07,

Please try adding this custom CSS to make the breadcrumb for all pages same height:
```
body:not(.woocommerce-shop) .page-heading.bc-type-left2.bc-effect-none.bc-color-dark {
    padding: 15px 0 !important;
}
body:not(.woocommerce-shop) .page-heading .a-center {
    padding: 0 !important;
}
```
Hope it helps!
#402676 Copied
Andrew Mitchell

Support staff

July 3, 2024 at 13:29

Dear Elhadj07,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#402916 Copied
Tagged: change button border radius, customize woocommerce details, improve woocommerce templates, personalize wordpress buttons, woocommerce radius adjustment, wordpress button design, wordpress woocommerce templates
Viewing 23 results - 1 through 23 (of 23 total)

The issue related to '‘Buttons and other details border radius change’' has been successfully resolved, and the topic is now closed for further responses

Buttons and other details border radius change

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection