How to edit/remove elements in Quick order List section of Trade Theme

[Akshay_au]

I am trying to remove the price per variant and variant subtotal from the quick order sell section as I feel it is getting repeated again and again. Already the price is shown on the main product page for a product and total is already at the bottom of the quick order list.

Can someone help me with this? Also, once the variant total is removed I was thinking that the quantity selector can go on the right in its place. It will look very clean and easy to understand.

Thanks for the help.

[BSS-TekLabs]

Hello @Akshay_au
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[Akshay_au]

Hello @BSS-TekLabs . Website www.AutoUniform.com. It will be awesome if you can check and provide with a solution.

[BSS-TekLabs]

• Here is the solution for you @Akshay_au
• Please follow these steps:

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

.cart-item__name+.product-option {
    display: none !important;
}

• Here is the result you will achieve:

Is there anything else you want to hide?

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Akshay_au]

@BSS-TekLabs Thanks for the efforts. But I don’t think you got my question. I am asking about the “quick order list” section in the trade theme. I wish to remove some of its elements in that section.

[BSS-TekLabs]

Do you want like this @Akshay_au

[BSS-TekLabs]

.quick-order-list__table .quick-order-list__table-heading--wide+.quick-order-list__table-heading--wide {
display: none !important;
}
    .variant-item .variant-item__price {
        text-align: right;
        display: none !important;
    }

Can you try add this code to the last line file base.css @Akshay_au

[Akshay_au]

@BSS-TekLabs I am in the edit theme page. I want both the circled items to be removed that is " variant total" and “price per unit”

And once both of them are removed from the “quick order list” section on the product page then we can shift the quantity selector to the right as pointed out in the image.

3 tasks to be performed.

[Akshay_au]

@BSS-TekLabs While this is helpful for desktop view but mobile view is shows the variant price and variant total.

Also most importantly, You are working on the quick add section. Enter the product page completely and then you will find “quick order list” section. We have to make changes in that. For both, desktop and mobile view.

[BSS-TekLabs]

.quick-order-list__table .quick-order-list__table-heading--wide+.quick-order-list__table-heading--wide {
display: none !important;
}
    .variant-item .variant-item__price, th.small-hide.medium-hide.right.caption-with-letter-spacing, td.variant-item__totals.right.small-hide.medium-hide {
        text-align: right !important;
        display: none !important;
    }
.variant-item__quantity-wrapper {
    display: flex !important;
    width: 100% !important;
    justify-content: end !important;
}
th.quick-order-list__table-heading--wide.small-hide.medium-hide.caption-with-letter-spacing {
    text-align: end !important;
}

Can you try this code @Akshay_au

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Akshay_au]

@BSS-TekLabs This has worked partially for the desktop view.

Mobile view still shows everything.

.

[BSS-TekLabs]

@media only screen and (max-width: 750px) {
.quick-order-list__table *.right, .variant-item__discounted-prices {
    display: none !important;
}
}

Can you add more this code @Akshay_au

[BSS-TekLabs]

@Akshay_au Are they working? Is there anything else I can do?

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Akshay_au]

@BSS-TekLabs It is working on mobile and full screen now. But the desktop view is still the same. Can you help here?

Desktop view

Also, as required since beginning, in the Mobile view can we have the quantity selector on the right side of the variant instead of it being under the variant? It will become easy to understand.

Awaiting your response.

[BSS-TekLabs]

First, chang this code

@media only screen and (max-width: 750px) {
.quick-order-list__table *.right, .variant-item__discounted-prices {
    display: none !important;
}
}

to this code

@media only screen and (max-width: 990px) {
.quick-order-list__table *.right, .variant-item__discounted-prices {
    display: none !important;
}
}

[BSS-TekLabs]

@media screen and (max-width: 989px) {
    .variant-item {
        display: flex !important;
    }
.variant-item__quantity-wrapper {
        flex-wrap: nowrap !important;
    }
}

and add more this code @Akshay_au

[Akshay_au]

@BSS-TekLabs it is coming exactly as per required now. Except, why does in some of the products the prices are getting displayed even after we removed them?

Product 1 - OK

product 2 - NOT OK - unit prices getting displayed.

Can you please check here?

[BSS-TekLabs]

.variant-item__details span.price {
    display: none !important;
}

Can you add more this code @Akshay_au

[Akshay_au]

@BSS-TekLabs Added this code, it removed the price per unit but unfortunately it messed with the alignment. Can you help for the lat time here? It will be highly appreciated.

[BSS-TekLabs]

@media screen and (max-width: 989px) {
    .variant-item {
        justify-content: space-between !important;
    }
}

Can you try add this code @Akshay_au