Product category archive page styling options

This topic has 13 replies, 3 voices, and was last updated 2 years, 1 months ago ago by Awais Ahmed

  • Avatar: Diollo Store
    Diollo Store
    Participant
    June 27, 2022 at 06:48

    Hello, i want to style my category archive page
    right now it’s just a blank page with category archive product
    i want to make it like the one in theme :
    https://xstore.8theme.com/elementor/demos/minimal-electronics/product-category/smart-gadgets/

    please let me know how to do it
    thank you

    12 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 27, 2022 at 07:10

    Hello,

    The category page inherits styles from the Shop page, so go to Theme options > WooCommerce > Shop > Shop page layout.
    If this is not what you are looking for, please provide some screenshots for a better understanding of your request.
    You can use Lightshot screenshot or Gyazo tool to share links to your screenshots.

    Regards

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    June 27, 2022 at 07:15

    Hello, @Diollo Store,

    The products category page inherits the layout of the Shop page, all available settings you can find in Theme Options > WooCommerce.

    Regards 8Themes Team.

    Avatar: Diollo Store
    Diollo Store
    Participant
    June 27, 2022 at 08:37

    Hello, yes i found the options
    but i need to add the title of the current category in the middle top of the page

    also how i can change the price filter from a slider to box’s so i can type the minimum and maximum price instead of sliding

    https://prnt.sc/bIwWk-a0sbvS

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    June 27, 2022 at 09:42

    Hello, @Diollo Store,

    1) Simply go to the Dashboard >> XStore >> Theme Settings >> Theme Custom CSS and then paste the below code there the title will appear in the center.

    .woocommerce .page-heading .title{text-align:center !important; width:100% !important; font-size:30px !important; font-weight:600 !important;}
    
    .woocommerce nav.woocommerce-breadcrumb{width:100% !important;}

    Note: If your issue is not resolved then please share your site wp-admin URL and access with us I will fix it on your site.

    2) Sorry to say, that there is no option in the theme for this the price filter will appear as a slider and you cannot change it from theme options it requires customization.

    Regards 8Themes Team.

    Avatar: Diollo Store
    Diollo Store
    Participant
    August 10, 2022 at 17:19

    Hello, the code isn’t working

    i need to show the title at the beginning of the category page.

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 11, 2022 at 06:30

    Hello, @Diollo Store,

    The code is working fine on my test site. I have tested the code again and made a video for you: https://streamable.com/8w1j99
    please watch it for a better reference.

    Note: If the issue will still persist then Please share your site WP-ADMIN Login details in the below-listed format in the private content area so that we’ll check and assist you accordingly.

    WP Admin URL:
    WP Admin Username:
    WP Admin Password:

    Regards 8Themes Team.

    Avatar: Diollo Store
    Diollo Store
    Participant
    August 12, 2022 at 13:37

    ok i think because i don’t have the title it self appears in the page like n the video, how i can make the title appears ?
    so after that i can add your code

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 13, 2022 at 06:53

    Hello, @Diollo Store,

    Yes, You don’t have the title on the page so you have to enable this. The thing is, the title appears on the breadcrumb when you enable the breadcrumbs from the Dashboard >> XStore >> Theme Options >> Breadcrumbs see image: https://postimg.cc/gwbtGbqj the title will appear also.

    After that try the code that we shared with you your issue will be resolved.

    Note: If the issue will still persist then Please share your site WP-ADMIN Login details in the below-listed format in the private content area so that we’ll check and assist you accordingly.

    WP Admin URL:
    WP Admin Username:
    WP Admin Password:

    Regards 8Themes Team.

    Avatar: Diollo Store
    Diollo Store
    Participant
    August 13, 2022 at 12:35

    i couldn’t manage to make it work unfortunately
    here is the wp access

    please DO NOT UPDATE ANYTHING

    also i want just the title of the category on the category page with no breadcrumbs, because after enabling the breadcrumbs it show in every page including the home page.

    thank you.

    Please contact administrator
    for this information.
    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 15, 2022 at 06:28

    Hello, @Diollo Store,

    Your issue is resolved now, kindly first check back to your site after clearing the browser cache. The thing is as I already told you the title appears if you enable the breadcrumb. So I enable the breadcrumb on your site then with the help of custom CSS code I manage to solve your issue. I have made a detailed video for you here is the video URL: https://streamable.com/vhonzo please watch it completely for a better understanding.

    Regards 8Themes Team.

    Avatar: Diollo Store
    Diollo Store
    Participant
    August 15, 2022 at 10:32

    Hello, yes the problem solved, but i need breadcrumbs to be visible in the single product page

    credentials are the same
    DO NOT UPDATE ANYTHING

    Avatar: Awais Ahmed
    Awais Ahmed
    Participant
    August 16, 2022 at 06:40

    Hello, @Diollo Store,

    Alright, the breadcrumbs are now visible on the single product page too. Please check back to your site after clearing the browser cache. See this image for a better reference: https://postimg.cc/VS7CTssN

    Regards 8Themes Team.

  • Viewing 13 results - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.