The Add to Quote button works correctly on both the Shop and Single Product pages in most of the themes.
However, because some themes handle layouts differently. If you see any UI issues, you must use CSS that matches the selected button placement setting.
👉 Do not mix CSS between settings.
Each placement option (Inline / Underneath) requires its own CSS rules.
Important Rule (Must Read)
Use Inline CSS only when the Inline with “Add to Cart” option is enabled
Use Underneath CSS only when the Underneath “Add to Cart” option is enabled
Applying the wrong CSS for a different setting may cause alignment issues
Inline with “Add to Cart” (Shop + Single Product Pages)
Use this CSS only if you selected Inline with “Add to Cart”. You can find this setting at PSM Plugins > Request a Quote > General Settings > Add to Quote > Single product page location.
This works on:
Shop page
Single product page
/* Make Add to Quote align inline with Add to Cart */
.woocommerce ul.products li.product .psmraq-add-to-quote-wrapper {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
}
.woocommerce ul.products li.product .psmraq_add_to_quote_button {
margin: 0;
}
.psmraq-add-to-quote-wrapper.single-product-page {
display: contents;
}
Result:
“Add to Quote” appears neatly inline with “Add to Cart”
Proper spacing and vertical alignment
Works consistently across supported themes
Underneath “Add to Cart” – Single Product Page
Use this CSS only if you selected Underneath “Add to Cart” and want to fix alignment on the single product page. You can find this setting at PSM Plugins > Request a Quote > General Settings > Add to Quote > Single product page location.
.psmraq-add-to-quote-wrapper.single-product-page {
margin-top: 10px;
padding-left: 0px !important;
}
Why this works:
The plugin adds the
.single-product-pageclass automaticallySome themes add unwanted left padding, which this removes
Ensures the button stays centered below “Add to Cart”
Underneath “Add to Cart” – Shop Page
Use this CSS only if you selected Underneath “Add to Cart” and want to fix alignment on the shop page.
.psmraq-add-to-quote-wrapper.loop-product-page {
margin-top: 1rem !important;
justify-content: center;
}
Result:
Proper spacing below “Add to Cart”
Button stays aligned with product layout
Works with grid-based and flex-based themes
Why Separate CSS Is Required
Shop and single product pages use different wrappers
The plugin assigns page-specific classes:
.loop-product-page→ Shop page.single-product-page→ Single product page
Themes may apply different layout rules to each page
Using page-specific CSS ensures predictable and stable alignment.
Best Practices
Always match CSS to the selected button placement option
Avoid using dynamic IDs (they change per product)
Prefer plugin-specific wrapper classes for styling
Test changes on both Shop and Single Product pages