1. Home
  2. Customization
  3. Changing the order of shopping cart product categories

Changing the order of shopping cart product categories


Today I will show you how to change the sequence of shopping cart categories so DIGITAL DOWNLOADS will be at the top of the list.  The default SmugMug shopping cart shows  PAPER PRINTS at the top of the list. The final result will look like this:




The code is pretty easy, but you will need to add it to your theme.  Just log in to your SmugMug account → click CUSTOMIZE → CONTENT AND DESIGN → on the right side panel select ENTIRE SITE → open the THEME tab → hover your cursor over the current theme that you are using and click the wrench icon → this will open a small popup window → open the ADVANCED tab and scroll down to the CUSTOM CSS section → and click the EDIT BUTTON → this will open a CSS editor – just paste this code to it:

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column !important;

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(2) {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(3) {
    -webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(4) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;


If you are offering PHONE CASES in your shopping cart – you will need to add this line of code at the bottom of the above code :
.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(5) {
    -webkit-box-ordinal-group: 5;
    -moz-box-ordinal-group: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;



How does the code work?

The standard SmugMug cart has 4 categories { 5 if you are offering phone cases }:

  • paper prints
  • wall art
  • desk art
  • downloads

In this line of code:

.sm-user-ui .sm-addtocart-step-categories .sm-addtocart-product-list li:nth-of-type(1) {
    /*The number 1 is for category 1*/
    -webkit-box-ordinal-group: 2;
    /*The number 2 is the destination category*/
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;


I am moving my 1st category to section 2.

So you can experiment with the code, move your categories around to display them the way you want.

Have fun!

Updated on May 9, 2018

Was this article helpful?

Related Articles


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.