WCPT provides you styling options at various levels to ensure you can highly customize your table’s style as per your needs.
For general styling purposes please use the product table > Style tab and apply styles from there. You can apply styles that specifically target Laptop, Tablet or Phone size devices.
In order to style individual columns go to the Column > Cell template > Design section and apply your column specific styles there.
Likewise you can apply unique styling to specific elements as well via the element’s settings > Style for element.
Column width
You can give each columns a fixed width. For example, if you want to give the columns width 20%, 40% 20%, 20% (total should be 100%) then you need to go to the design settings for each column and give it the percentage width.
If you are manually setting widths for each column in this manner please take note of responsive view of your table. If you do not have tablet / phone specific columns setup then the custom widths will be applied to the columns on narrowers screens as well.
Column text align
To set the text align for the table heading and cells from a central place try the table settings > Style > Laptop style > Headings | Cells > Text align.
If you need to set different text align for individual columns you can do that from the Style settings of the individual columns.
Columns cells vertical align
You can decide how the content in adjacent cells align with each other through the vertical align property.
Force overrides
Sometimes themes apply aggressive styling that can override the styling set through WCPT. The common case is setting font color and size for cells. Please use:
.wcpt-heading {
font-size: 18px !important;
font-color: black !important;
}
.wcpt-cell {
font-size: 16px !important;
font-color: black !important;
}
Change the color and font size to what you need. For further assistance please contact support.
Table heading
.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
@media(max-width: 1099px){ /* Tablet style */
.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
}
@media(max-width: 800px){ /* Phone style */
.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
}
Navigation (above table)
Header navigation section sample CSS:
.wcpt-header {
padding: 10px 15px;
background: white;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
}
Filter dropdown text styline sample CSS:
.wcpt-filter .wcpt-dropdown-option {
font-family: Tahoma !important;
font-size: 16px !important;
color: black !important;
}
.wcpt-filter .wcpt-filter-heading {
font-family: Tahoma !important;
font-size: 16px !important;
color: black !important;
}
Product addons – only show short text field
If you have a ‘short text’ product add field attached to your products and wish to display it in your tables you need to follow the following steps:
- Add a Cart Form element to one of your columns
- In the settings of this cart form element, in Additional CSS Class add: wcpt-product-addons-only-short-text-field
- Now in the table settings > Style > CSS, enter the following code:
.wcpt-product-addons-only-short-text-field {
vertical-align: middle !important;
}
.wcpt-product-addons-only-short-text-field > *:not(form),
.wcpt-product-addons-only-short-text-field > form > *:not(.wc-pao-addon),
.wcpt-product-addons-only-short-text-field > form .wc-pao-addon label {
display: none !important;
}
.wcpt-product-addons-only-short-text-field > form .wc-pao-addon,
.wcpt-product-addons-only-short-text-field .wc-pao-addon-wrap {
padding: 0 !important;
margin: 0 !important;
}
Cart form – only show attribute dropdowns (and price)
If you need to show your attribute dropdowns in a column and do not wish to show other elements like price or add to cart in that column you can follow this guide:
- Add a Cart Form element to one of your columns
- In the settings of this cart form element, in Additional CSS Class add: wcpt-only-attributes
- Now in the table settings > Style > CSS, enter the following code:
.wcpt-only-attributes {
vertical-align: middle !important;
}
.wcpt-only-attributes > *:not(form),
.wcpt-only-attributes > form > *:not(.variations):not(.single_variation_wrap),
.wcpt-only-attributes > form .single_variation > *:not(.woocommerce-variation-price),
.wcpt-only-attributes .woocommerce-variation-add-to-cart {
display: none !important;
}
.wcpt-only-attributes > form,
.wcpt-only-attributes > form .variations {
margin:0 !important;
}
.wcpt-only-attributes .woocommerce-Price-amount {
font-size: 18px !important;
font-weight: bold !important;
color: #66a918 !important;
}
If you need to hide the price as well, please use:
.wcpt-only-attributes .woocommerce-Price-amount,
.wcpt-only-attributes .single_variation_wrap {
display: none !important;
}
Global search shortcode
/* Height */
.wcpt-global-search__form,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__submit-wrapper {
line-height: 56px !important;
height: 56px !important;
}
/* Input Field */
.wcpt-global-search__keyword-input {
border-color: #CDDC39 !important;
font-size: 16px !important;
}
.wcpt-global-search__keyword-input:focus {
border-color: #AFB42B !important;
}
/* Dropdown */
/* -- background */
.wcpt-global-search__category-selector-wrapper {
background: #CDDC39 !important;
font-size: 16px !important;
}
.wcpt-global-search__category-selector-wrapper:hover {
background: #AFB42B !important;
}
/* -- text */
.wcpt-global-search__category-selector-facade {
color: rgba(0, 0, 0, 0.75);
font-size: 15px;
}
/* Submit Button */
/* -- background */
.wcpt-global-search__submit {
background: #CDDC39 !important;
}
.wcpt-global-search__submit:hover {
background: #AFB42B !important;
}
/* -- icon */
.wcpt-global-search__submit-icon {
color: rgba(0, 0, 0, 0.75);
stroke-width: 3px;
}
/* -- text */
.wcpt-global-search__submit-text {
font-size: 15px;
color: rgba(0, 0, 0, 0.75);
}