Product dynamic discounts table

Hi,

Can you provide css code to change the titles of quantity, price, discount to below?
1. Font size to be smaller 14px and less weight
2. Change each column vertical center aligned, and move to the middle like attached sample.
3. Change the column order, Quantity, Discount, Price like sample attached

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following custom css code in Theme Settings > Custom CSS:

/* 1. Header Typography (Smaller 14px, normal casing, medium weight) */
.wd-dynamic-discounts table thead th {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
}

/* 2. Alignment & Centering */
.wd-dynamic-discounts table th,
.wd-dynamic-discounts table td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* 3. Reorder Columns: Quantity (1st), Discount (2nd), Price (3rd) */
.wd-dynamic-discounts table tr {
    display: flex !important;
}

.wd-dynamic-discounts table th,
.wd-dynamic-discounts table td {
    flex: 1 !important;
}

/* Reorder Header Columns */
.wd-dynamic-discounts table thead th:nth-child(1) { order: 1; } /* Quantity */
.wd-dynamic-discounts table thead th:nth-child(2) { order: 3; } /* Price moved to 3rd */
.wd-dynamic-discounts table thead th:nth-child(3) { order: 2; } /* Discount moved to 2nd */

/* Reorder Body Columns */
.wd-dynamic-discounts table tbody td.wd-dd-quantity { order: 1; }
.wd-dynamic-discounts table tbody td.wd-dd-price    { order: 3; }
.wd-dynamic-discounts table tbody td.wd-dd-discount { order: 2; }

Best Regards

Thanks a lot!

One last question,
1. Can you provide css code to reduce the table each row spacing, because it takes too much spacing, kindly change to the look like sample spacing.
2. Can you add a title “Wholesale Pricing ” above the table, left aligned, font 15px, same weight like other titles.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

To add a custom heading above the dynamic discounts table, please edit your Single Product Layout using Elementor and add a Heading widget above the Dynamic Discounts widget. You can set the title text, font size, weight, and alignment directly from the Elementor settings.

To reduce the table row spacing, please add the following custom CSS code in Theme Settings > Custom CSS:

/* Reduce spacing between table rows */
.wd-dynamic-discounts table tbody td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Reduce header spacing */
.wd-dynamic-discounts table thead th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

Best Regards

Hi,

Thanks for your css code.
For the title, I do suggest build-in method into your theme, instead of adding seperate title widget, cause if the discount price table not apply on all products, then the title widget still exist there, it becomes useless element though. Hope your theme update can consider adding built-in title above the table. Thank you!

Hello,

At the moment, the theme does not include such an option, so adding a separate Heading widget is the available workaround. Also, you can use custom css to add an extra heading.

For any feature request, you can create a feature request here – https://woodmart.userjot.com/ so our developers can take it into account.

Best Regards

[Author]

Posts