Re-order shop categories in Hayden Template

Site URL: https://www.foragebotanicals.co.uk/shop

I need to reorder the categories on my shops page.

I have tried a couple code injections that haven't worked.

The current order is:

All | Bladder Care | Crampy | Cycle Syncing | Fertility | Gifts | Irregular Periods | Moody | Spotty | Stressed | Subscription Kits | Tired

I need the order to be:

Subscription Kits | Crampy | Irregular Periods | Moody | Spotty | Stressed | Tired | Cycle Syncing | Fertility | Gifts | All 

I'm using 7.0 Hayden family template.

I see on your site, has 12 links

In your questions, has 11 links only

Can you check again?

Apologies,

Current order:

All | Bladder Care | Crampy | Cycle Syncing | Fertility | Gifts | Irregular Periods | Moody | Spotty | Stressed | Subscription Kits | Tired

New Order:

all, subscription kits, crampy, moody, spotty, stressed, tired, cycle syncing, irregular periods, bladder care, fertility, gifts

Thanks!

13 hours ago, Kathorchard said:

Apologies,

Current order:

All | Bladder Care | Crampy | Cycle Syncing | Fertility | Gifts | Irregular Periods | Moody | Spotty | Stressed | Subscription Kits | Tired

New Order:

all, subscription kits, crampy, moody, spotty, stressed, tired, cycle syncing, irregular periods, bladder care, fertility, gifts

Thanks!

Add to Design > Custom CSS

/* Shop category links order */
@media screen and (min-width:641px) {
ul.category-nav-links {
    display: flex;
    flex-direction: column;
}
}
@media screen and (max-width:640px) {
    div#categoryNav.expanded ul.category-nav-links {
        display: flex;
        flex-direction: column
    }
}
/* 1 Shop Label */
li.nav-section-label {
    order: 1;
}

/* 3 All */
ul.category-nav-links>li:nth-child(3) {
    order: 2;
}
/* 4 Subscription kits */
ul.category-nav-links>li:nth-child(13) {
    order: 4;
}
/* 5 crampy */
ul.category-nav-links>li:nth-child(5) {
    order: 5;
}
/* 6 Moody */
ul.category-nav-links>li:nth-child(10) {
    order: 6;
}
/* 7 Spotty */
ul.category-nav-links>li:nth-child(11) {
    order: 7;
}
/* 8 Stressed */
ul.category-nav-links>li:nth-child(12) {
    order: 8;
}
/* 9 tired */
ul.category-nav-links>li:nth-child(14) {
    order: 9;
}
/* 10 cycle syncing */
ul.category-nav-links>li:nth-child(6) {
    order: 10;
}
/* 11 irregular periods */
ul.category-nav-links>li:nth-child(9) {
    order: 11;
}
/* 12 bladder care */
ul.category-nav-links>li:nth-child(4) {
    order: 12;
}
/* 13 fertility */
ul.category-nav-links>li:nth-child(7) {
    order: 13;
}
/* 14 gifts */
ul.category-nav-links>li:nth-child(8) {
    order: 14;
}

Thats worked perfectly thanks so much!

On 1/20/2022 at 6:07 AM, tuanphan said:

Add to Design > Custom CSS

/* Shop category links order */
@media screen and (min-width:641px) {
ul.category-nav-links {
    display: flex;
    flex-direction: column;
}
}
@media screen and (max-width:640px) {
    div#categoryNav.expanded ul.category-nav-links {
        display: flex;
        flex-direction: column
    }
}
/* 1 Shop Label */
li.nav-section-label {
    order: 1;
}

/* 3 All */
ul.category-nav-links>li:nth-child(3) {
    order: 2;
}
/* 4 Subscription kits */
ul.category-nav-links>li:nth-child(13) {
    order: 4;
}
/* 5 crampy */
ul.category-nav-links>li:nth-child(5) {
    order: 5;
}
/* 6 Moody */
ul.category-nav-links>li:nth-child(10) {
    order: 6;
}
/* 7 Spotty */
ul.category-nav-links>li:nth-child(11) {
    order: 7;
}
/* 8 Stressed */
ul.category-nav-links>li:nth-child(12) {
    order: 8;
}
/* 9 tired */
ul.category-nav-links>li:nth-child(14) {
    order: 9;
}
/* 10 cycle syncing */
ul.category-nav-links>li:nth-child(6) {
    order: 10;
}
/* 11 irregular periods */
ul.category-nav-links>li:nth-child(9) {
    order: 11;
}
/* 12 bladder care */
ul.category-nav-links>li:nth-child(4) {
    order: 12;
}
/* 13 fertility */
ul.category-nav-links>li:nth-child(7) {
    order: 13;
}
/* 14 gifts */
ul.category-nav-links>li:nth-child(8) {
    order: 14;
}

 

If I were to change the names of the menu or add an additional category how would I go about that? Thank you!

I think your best bet would be to provide us with a new list of your categories in the order you want them to appear.