The Add to Quote button appearance can be managed directly from the plugin’s Appearance settings.
These settings are usually sufficient for most themes.
However, some themes apply strong CSS rules that may override plugin styles.
If the appearance settings do not reflect on the front end, you can use the custom CSS examples below.
All CSS snippets include !important to ensure they are not overridden by theme styles.
Primary Button Class
Use this class to target all Add to Quote buttons.
.psmraq_add_to_quote_button
This is the main class for customizing text color, font, size, background, and borders.
Wrapper Classes (Page-Specific Styling)
The plugin adds wrapper classes so you can apply styles only where needed.
Shop page
.psmraq-add-to-quote-wrapper.loop-product-page
Single product page
.psmraq-add-to-quote-wrapper.single-product-page
Change Button Text Color
.woocommerce .psmraq_add_to_quote_button.button {
color: #2ecc71 !important;
}
Change Button Font Size and Weight
.psmraq_add_to_quote_button {
font-size: 14px !important;
font-weight: 600 !important;
}
Change Button Font Family
.psmraq_add_to_quote_button {
font-family: Arial, Helvetica, sans-serif !important;
}
Change Button Background Color
.psmraq_add_to_quote_button {
background-color: #ffffff !important;
}
Change Button Border and Border Radius
.woocommerce .psmraq_add_to_quote_button.button {
border: 2px solid #2ecc71 !important;
border-radius: 4px !important;
}
Hover State Styling
.woocommerce .psmraq_add_to_quote_button.button:hover {
background-color: #2ecc71 !important;
color: #ffffff !important;
}
Shop Page Only Styling Example
Use this if you want a different button style on shop and category pages.
.psmraq-add-to-quote-wrapper.loop-product-page
.psmraq_add_to_quote_button {
font-size: 13px !important;
}
Single Product Page Only Styling Example
Use this if you want a different style on single product pages.
.psmraq-add-to-quote-wrapper.single-product-page
.psmraq_add_to_quote_button {
font-size: 15px !important;
}
Important Notes
Always try Appearance settings first before using CSS.
Use CSS only if the theme overrides plugin styles.
Do not use dynamic IDs like
#psmraq_add_to_quote_button_1234.Always use class-based selectors provided by the plugin.
You can add custom CSS from Appearance → Customize → Additional CSS or via your child theme stylesheet.
Recommended Customization Workflow
Configure the button style from Appearance settings.
Check the front end for theme conflicts.
Apply the required CSS from above if needed.
Test on both Shop and Single Product pages.