Return to previous page

Product category title position and style

This topic has 33 replies, 3 voices, and was last updated 1 month, 3 weeks ago ago by Samir Malik

phssaddlery

Participant

September 25, 2025 at 20:46

Hi,

See private content area for details.

1. What css to use to move category titles under the category images and increase font size, add more space around each image — similar with the original website

2. The Promo text needs to open in a popup /#etheme-popup , but it is not doing that, though the link is set in that widget. And how to change the style for the font size or font family?

3. Main menu and dropdown options – I did not find the setting in Customizer to change the background color for both (main on black and dropdown on a shade of grey, as the original website

Thank you!

Please, contact administrator
for this information.

#455932 Copied

32 Answers
Luca Rossi

Support staff

September 26, 2025 at 11:55
Hi @phssaddlery,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

body .category-grid.valign-bottom .categories-mask { position: static; background-color: #F3F3F3; margin-top: -5px; } body .category-grid.valign-bottom .categories-mask a h4 { font-weight: bold; letter-spacing: 1px; font-size: 22px; }

https://prnt.sc/IvLSmh3Lrdsx

Kind regards,
The 8Theme Team
#455975 Copied
phssaddlery

Participant

September 26, 2025 at 19:46

Hi Luca,

That worked perfectly!

Can you please also help me with the items 2) and 3) in my post plus 4) below:

4) CSS for moving the subcategory title under the images (see private area for link)

Please contact administrator
for this information.

#456001 Copied

Luca Rossi

Support staff

September 27, 2025 at 12:15

Hi @phssaddlery,

2. Could you please provide some screenshots? We are not entirely clear about your points.

3. We kindly recommend using the Header Elementor Builder for greater control and flexibility. You can find more information here: https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/

Best regards,
The 8Theme Team

#456028 Copied

phssaddlery

Participant

September 29, 2025 at 22:09

Meanwhile I installed the Elementor to be able to use the XStore builders with it.

Currently I am editing with Customizer. In the Customizer for header I did not find settings to change the font size, weight etc.

Is it possible to edit my current template with Elementor or do I need to start from scratch in Elementor? I am using header #4 (“furniture 3 demo header”) See screenshot.

https://prnt.sc/melG10ox7HH-

#456197 Copied

Luca Rossi

Support staff

September 30, 2025 at 07:51

Dear @phssaddlery,

Unfortunately, it is not possible to use your current header with the Elementor Header Builder, so you will need to create a new one from scratch. However, we offer a wide range of prebuilt header templates for you to choose from:

https://prnt.sc/Fncpe8PHTPcs

Best regards,
8Theme Team

#456217 Copied

phssaddlery

Participant

January 2, 2026 at 01:01

Happy New Year!

I created a Elementor Header as you suggested. (Elementor Header #18522)

Can you please help me fix the checkout page look to look the same like the original website?

Original website: see the position of “Shipping to a different address” beside Billing info, then when checked, the entire Shipping address fields show at the right of Billing column
https://prnt.sc/7e1yAT49yiB2 (Shipping box unchecked)
https://prnt.sc/aH7FEWxwQndf (Shipping box checked)

I need Ship to a different address checkbox to be placed at the right of Billing and when checked to show Shipping Address beside the Billing column, not underneath it:
https://prnt.sc/NfuIJsJhi5n5

In the stagging website I am using the Elementor checkout widget. (it was using woocommerce_checkout shortcode before)

Thank you!

Lucian

Please contact administrator
for this information.

#463601 Copied

Samir Malik

Support staff

January 2, 2026 at 06:44

Dear @phssaddlery,

Could you please resend your WordPress Admin account details to us?

Thank you for your cooperation.

Best regards,
The 8Theme Team

#463605 Copied

phssaddlery

Participant

January 2, 2026 at 08:27

Hi Samir,

Please find the admin login in the private section.

Thanks, Lucian

Please contact administrator
for this information.

#463609 Copied
Samir Malik

Support staff

January 2, 2026 at 10:57
Hello,

1. Please find and remove this custom CSS codes:

.elementor-6 .elementor-element.elementor-element-cf02dcf #ship-to-different-address { position: absolute; top: 0; right: 0; z-index: 10; margin: 0; }

2. Then try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.cart-checkout-advanced-layout .content-page { max-width: 1400px; width: 90%; } .cart-checkout-advanced-layout .e-con.e-flex>.e-con-inner { max-width: 100%; width: 100%; } .cart-checkout-advanced-layout .etheme-elementor-cart-checkout-page-column.first { display: flex; flex-wrap: wrap; } .cart-checkout-advanced-layout .woocommerce-shipping-fields { order: 1; flex:0 0 50%; } .cart-checkout-advanced-layout .woocommerce-billing-fields { order: 0; flex:0 0 50%; } .cart-checkout-advanced-layout .woocommerce-account-fields:not(:first-child) { order: 2; flex:0 0 100%; } @media (max-width: 600px){ .cart-checkout-advanced-layout .woocommerce-checkout .woocommerce-shipping-fields, .cart-checkout-advanced-layout .woocommerce-checkout .elementor-widget-woocommerce-checkout-etheme_page .woocommerce-billing-fields { flex-basis: 100% !important; } }

Kind regards,
The 8Theme Team
#463614 Copied
phssaddlery

Participant

January 3, 2026 at 01:10

Thank you, that worked! I found and removed that code in wp-content/uploads/elementor/css/post-6.css and I placed the other code in Global CSS.

How do I adjust both Billing and Shipping columns to align vertically? They are a bit off, no matter if Shipping to different address is checked or not.
https://prnt.sc/pZavS_mlRsve

#463649 Copied
Samir Malik

Support staff

January 3, 2026 at 14:37
Hello,

Could you please also add this custom CSS code?

@media (min-width: 980px){ .cart-checkout-advanced-layout .woocommerce-shipping-fields { margin-top: 0; } }

Let us know how it goes!

Best Regards,
8Theme’s Team
#463673 Copied
phssaddlery

Participant

January 3, 2026 at 21:57

Thank you, that worked! One last thing: when I check “Shipping to different address” the billing fields go down a bit, but not enough to align with the shipping fields. What css code will fix that?
https://prnt.sc/9FPbFz5-o7Ne

#463685 Copied
Samir Malik

Support staff

January 4, 2026 at 05:13
Hello,

Please also add this one:

body.woocommerce-checkout .elementor-element .etheme-elementor-cart-checkout-page-column.first .woocommerce-billing-fields { display: block !important; }

Hope it helps!
#463693 Copied
phssaddlery

Participant

January 4, 2026 at 05:20

It helped! Perfect. I appreciate your help!

#463694 Copied

Samir Malik

Support staff

January 4, 2026 at 10:11

Hello,

We are glad to know that it helped and everything is working perfectly. We truly appreciate your kind feedback and are always happy to assist you.

Best Regards,
8Theme’s Team

#463701 Copied

phssaddlery

Participant

January 11, 2026 at 13:43

Hi Samir,

Can you please check one small detail here: I installed the xStore to the live website and on the checkout page the 2 billing and shipping are too close to each other. I have the settings you gave me before in Global Custom CSS. I setup the checkout page to not have a sidebar, as before.
https://prnt.sc/5Yn0-Hp5Mv9K

Thank you! — Lucian

Please contact administrator
for this information.

#464051 Copied
Samir Malik

Support staff

January 11, 2026 at 14:15
Hello,

Could you please find this custom CSS code?

.cart-checkout-advanced-layout .etheme-elementor-cart-checkout-page-column.first { display: flex; flex-wrap: wrap; } .cart-checkout-advanced-layout .woocommerce-shipping-fields { order: 1; flex:0 0 50%; } .cart-checkout-advanced-layout .woocommerce-billing-fields { order: 0; flex:0 0 50%; }

And change to this:

.cart-checkout-advanced-layout .etheme-elementor-cart-checkout-page-column.first { display: flex; flex-wrap: wrap; gap: 2%; } .cart-checkout-advanced-layout .woocommerce-shipping-fields { order: 1; flex:0 0 48%; } .cart-checkout-advanced-layout .woocommerce-billing-fields { order: 0; flex:0 0 48%; }

Hope it helps!
#464053 Copied
phssaddlery

Participant

January 12, 2026 at 07:01

Hi Samir,

The setting you sent me worked well! You are a great help, responding in timely manner! I’m glad I bought the theme support!

I still have some items which I tried to do myself. But sometimes these combination of settings in Customize/XStore Builder and Elementor makes it confusing… What rule(s) do I need to follow if the settings are mixed between these editors?

My customer viewed the website and wants a few more changes. This website has older customers and it needs more visible text, so I increased font size and used mostly solid black.

1. Checkout page
a) She wants the checkout page wider. I set up the container to 1400px – 1600px, but the checkout page seems restricted to go full-width in its container. You can compare with the previous checkout page:
https://prnt.sc/7e1yAT49yiB2
(nevermind the arrow in the screenshot)

Current checkout page — see private window

b) We can remove the border around the payment method column, that will make the page look more open.
c) Also the content of the 3rd column, should have “Your Order” vertically aligned at the top of the column. I think there is a gap now between the column top and the “Your Order” text.
d) The text label is too big, and the field inputs also too big, how can I make them smaller. (this happened when I changed the text size globally in Customize – Typography)

2. When you first go from Cart to Checkout page, the menu is aligned all the way to the left and the cart widget all the way to the right. They should be center aligned, the same as in the homepage header.
https://prnt.sc/V28dV95gDT3L

3. a) On the product detail page, I need the short description & full description text to be normal weight (now it is bold weight 700 I think)

b) This is only for the shopping cart widget next to the menu: the total text needs to be white by default and black on hover. (I think hover works)
https://prnt.sc/Iaurq56So2Du

Thank you again!

Lucian

Please contact administrator
for this information.

#464070 Copied

Samir Malik

Support staff

January 12, 2026 at 14:48

Hello,

Could you please provide us with your new admin account credentials so that we can add the custom CSS codes or make the necessary changes to the settings directly?

Thank you.

Best regards,
8Theme Team

#464089 Copied

phssaddlery

Participant

January 12, 2026 at 15:30

Please see below. If you still have time today, please check item 1. Checkout page. Thank you!

Please contact administrator
for this information.

#464094 Copied

Samir Malik

Support staff

January 12, 2026 at 16:28

Hello,

We have resolved the issues mentioned in point #1 of the checkout page.

Could you please review the changes?

Best regards,
The 8Theme Team

#464099 Copied

phssaddlery

Participant

January 12, 2026 at 17:29

Perfect! Thank you so much, Samir!

#464105 Copied

phssaddlery

Participant

January 12, 2026 at 22:49

When you continue, please note that the Customize from the website shows me the reverse colors for price in shopping cart widget (beside menu at top right), in cart and checkout page. I cleared cache in Elementor Data&Files, Clear Cache (cache enabler plugin) and some recommended cache turned on/off in xStore – Speed optimization. Still the same result. I wanted you to know, so you don’t spend time like me trying to figure out why something is not working 🙂 This is related to 3b)

I centered the menu & mini cart for cart and checkout pages, you can check if everything looks ok. This is 2).

#464116 Copied

Samir Malik

Support staff

January 13, 2026 at 11:47

Hello,

– Regarding point #2, it looks good on our side as well.
– Regarding point #3, could you please review the font weight on the product pages once more?

Thank you.
Best regards,
The 8Theme Team

#464139 Copied

phssaddlery

Participant

January 14, 2026 at 01:47

All looks great, thank you!

Lastly, 3b) This happens only for the shopping cart widget next to the menu: the total text needs to be white (on black background) or black (on white background) on Hover that button (at the right of the menu). Hover seems to works fine.

You can see in the first link that my Customizer tricks me and it shows the reverse colors in that preview editor.
https://prnt.sc/Iaurq56So2Du
https://prnt.sc/DDpUzrveMRju

I need ONLY the regular widget cart total to be white by default (as it shows on a black background)

I use these in the Global CSS — which is ok, it makes both widget cart total color & Product Price & Totals black color.
span.woocommerce-Price-amount.amount { color: #000000 !important; }
.single-product .price del .amount { color: #000000 !important; }

But if I change the above color to white, both widget total color & Product Price & totals show in white.

How do we set the white just for the widget cart total, when it’s showing on a black background?

I saw in the source code the widget total is embedded in a ….

I think I see something else: I deleted cookies & cache and added 2 products in the cart. The color is not yet solved, but the home page cart widget shows $0.00, while all the other pages show the correct total… But after I logged in, the small cart widget total shows ok on the homepage too. Strange.

#464174 Copied

Samir Malik

Support staff

January 14, 2026 at 06:00

Hello,

Before we proceed with resolving the remaining issues, could you please clarify why you are still using two page builder plugins?

We recommend using only the Elementor plugin, as having multiple page builder plugins may cause the website to load more slowly.

Thank you for your understanding.

Best regards,
8Theme Team

#464180 Copied

phssaddlery

Participant

January 14, 2026 at 06:13

I use Elementor since your team recommended me. I used it mostly for the header template. I opened Customize for Global CSS. I saw those color issue only by opening Customize main page. I will avoid doing settings in Customize. I think I did some changes in Customize, but more than a week ago, and then I asked for help. Is there a way to check if my code is mixed up and “clean” it?

I just took a full website backup and a database backup.

So going forward I need to only use Elementor for editing pages, and global css changes for other fixes? I will also check your documentation.

#464182 Copied

Samir Malik

Support staff

January 14, 2026 at 11:01

Hello,

Could you please check it now?

https://prnt.sc/-dGUn3ui8hsA

We have added a custom CSS code to override the color of the cart widget in the header.

By the way, would you consider disabling the WP Bakery Builder to prevent any potential conflicts with Elementor? Are you still using WP Bakery for any pages?

Best regards,
8Theme Team

#464195 Copied

phssaddlery

Participant

January 14, 2026 at 11:49

Price color looks great now in the cart widget in the header. Thank you!

I think WP Bakery was used only for the homepage.

You can see on the test website https://test.bitlessbridle.com (I copied again the admin login in the private content)

I deactivated WP Bakery and it shows this code in homepage.

[vc_row gap=”1″ equal_height=”yes” _et_uniqid=”et_custom_uniqid_new_68c099a92d61f”][vc_column][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” equal_height=”yes”][vc_column][etheme_categories sorting=”name” image_size=”medium” orderby=”include” order=”ASC” text_align=”center” valign=”bottom” text_color=”dark” columns=”3″ ids=”344, 79, 361, 80, 348″ number=”5″][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row]

Can you please first test on https://test.bitlessbridle.com and replace that in Elementor? Then you do the same on the live site?

If you don’t have time now, please do it tomorrow around the same time, when here is night. (aprox. between 10pm PST – 5am PST.
Thank you for all your effort! I will gladly write a review of your excellent expertise.

Please contact administrator
for this information.

#464199 Copied
1 2 →

Viewing 30 results - 1 through 30 (of 33 total)