{"id":641,"date":"2025-12-25T17:42:13","date_gmt":"2025-12-25T12:12:13","guid":{"rendered":"https:\/\/docs.psmplugins.com\/?post_type=docs&p=641"},"modified":"2026-02-04T15:23:29","modified_gmt":"2026-02-04T09:53:29","password":"","slug":"theme-compatibility-notes","status":"publish","type":"docs","link":"https:\/\/docs.psmplugins.com\/docs\/theme-compatibility-notes\/","title":{"rendered":"Theme compatibility notes"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Add to Quote<\/strong> button works correctly on both the Shop<\/strong> and Single Product<\/strong> 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<\/strong>.<\/p>

\ud83d\udc49 Do not mix CSS between settings<\/strong>.
Each placement option (Inline \/ Underneath) requires its own CSS rules<\/strong>.

<\/p>

Important Rule (Must Read)<\/h5>

  • Use Inline CSS<\/strong> only when the Inline with \u201cAdd to Cart\u201d<\/strong> option is enabled<\/p><\/li>

  • Use Underneath CSS<\/strong> only when the Underneath \u201cAdd to Cart\u201d<\/strong> option is enabled<\/p><\/li>

  • Applying the wrong CSS for a different setting may cause alignment issues

    <\/p><\/li><\/ul>

    Inline with \u201cAdd to Cart\u201d (Shop + Single Product Pages)<\/h5>

    Use this CSS only if<\/strong> you selected Inline with \u201cAdd to Cart\u201d<\/strong>. You can find this setting at PSM Plugins > Request a Quote > General Settings > Add to Quote > Single product page location.<\/p>

    This works on:<\/p>

    • Shop page<\/p><\/li>

    • Single product page<\/p><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t\/* Make Add to Quote align inline with Add to Cart *\/\r\n.woocommerce ul.products li.product .psmraq-add-to-quote-wrapper {\r\n    display: inline-block;\r\n    margin-left: 8px;\r\n    vertical-align: middle;\r\n}\r\n\r\n.woocommerce ul.products li.product .psmraq_add_to_quote_button {\r\n    margin: 0;\r\n}\r\n\r\n\r\n.psmraq-add-to-quote-wrapper.single-product-page {\r\n    display: contents;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f21bea elementor-widget elementor-widget-text-editor\" data-id=\"5f21bea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1469\" data-end=\"1480\"><strong data-start=\"1469\" data-end=\"1480\">Result:<\/strong><\/p><ul data-start=\"1481\" data-end=\"1623\"><li data-start=\"1481\" data-end=\"1538\"><p data-start=\"1483\" data-end=\"1538\">\u201cAdd to Quote\u201d appears neatly inline with \u201cAdd to Cart\u201d<\/p><\/li><li data-start=\"1539\" data-end=\"1578\"><p data-start=\"1541\" data-end=\"1578\">Proper spacing and vertical alignment<\/p><\/li><li data-start=\"1579\" data-end=\"1623\"><p data-start=\"1581\" data-end=\"1623\">Works consistently across supported themes<\/p><\/li><\/ul><h5 data-start=\"1630\" data-end=\"1682\">Underneath \u201cAdd to Cart\u201d \u2013 Single Product Page<\/h5><p data-start=\"1684\" data-end=\"1808\">Use this CSS <strong data-start=\"1697\" data-end=\"1708\">only if<\/strong> you selected <strong data-start=\"1722\" data-end=\"1750\">Underneath \u201cAdd to Cart\u201d<\/strong> and want to fix alignment on the <strong data-start=\"1784\" data-end=\"1807\">single product page<\/strong>. You can find this setting at PSM Plugins &gt; Request a Quote &gt; General Settings &gt; Add to Quote &gt; Single product page location.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de8100a elementor-widget elementor-widget-code-highlight\" data-id=\"de8100a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.psmraq-add-to-quote-wrapper.single-product-page {\r\n    margin-top: 10px;\r\n    padding-left: 0px !important;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-046778d elementor-widget elementor-widget-text-editor\" data-id=\"046778d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1931\" data-end=\"1950\"><strong data-start=\"1931\" data-end=\"1950\">Why this works:<\/strong><\/p><ul data-start=\"1951\" data-end=\"2131\"><li data-start=\"1951\" data-end=\"2015\"><p data-start=\"1953\" data-end=\"2015\">The plugin adds the <code data-start=\"1973\" data-end=\"1995\">.single-product-page<\/code> class automatically<\/p><\/li><li data-start=\"2016\" data-end=\"2075\"><p data-start=\"2018\" data-end=\"2075\">Some themes add unwanted left padding, which this removes<\/p><\/li><li data-start=\"2076\" data-end=\"2131\"><p data-start=\"2078\" data-end=\"2131\">Ensures the button stays centered below \u201cAdd to Cart\u201d<\/p><\/li><\/ul><h5 data-start=\"2138\" data-end=\"2180\"><br \/>Underneath \u201cAdd to Cart\u201d \u2013 Shop Page<\/h5><p data-start=\"2182\" data-end=\"2296\">Use this CSS <strong data-start=\"2195\" data-end=\"2206\">only if<\/strong> you selected <strong data-start=\"2220\" data-end=\"2248\">Underneath \u201cAdd to Cart\u201d<\/strong> and want to fix alignment on the <strong data-start=\"2282\" data-end=\"2295\">shop page<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b37939a elementor-widget elementor-widget-code-highlight\" data-id=\"b37939a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.psmraq-add-to-quote-wrapper.loop-product-page {\r\n    margin-top: 1rem !important;\r\n    justify-content: center;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8d5a64 elementor-widget elementor-widget-text-editor\" data-id=\"b8d5a64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"2423\" data-end=\"2434\"><strong data-start=\"2423\" data-end=\"2434\">Result:<\/strong><\/p><ul data-start=\"2435\" data-end=\"2560\"><li data-start=\"2435\" data-end=\"2471\"><p data-start=\"2437\" data-end=\"2471\">Proper spacing below \u201cAdd to Cart\u201d<\/p><\/li><li data-start=\"2472\" data-end=\"2514\"><p data-start=\"2474\" data-end=\"2514\">Button stays aligned with product layout<\/p><\/li><li data-start=\"2515\" data-end=\"2560\"><p data-start=\"2517\" data-end=\"2560\">Works with grid-based and flex-based themes<\/p><\/li><\/ul><h5 data-start=\"2567\" data-end=\"2601\"><br \/>Why Separate CSS Is Required<\/h5><ul data-start=\"2603\" data-end=\"2850\"><li data-start=\"2603\" data-end=\"2661\"><p data-start=\"2605\" data-end=\"2661\">Shop and single product pages use <strong data-start=\"2639\" data-end=\"2661\">different wrappers<\/strong><\/p><\/li><li data-start=\"2662\" data-end=\"2795\"><p data-start=\"2664\" data-end=\"2709\">The plugin assigns <strong data-start=\"2683\" data-end=\"2708\">page-specific classes<\/strong>:<\/p><ul data-start=\"2712\" data-end=\"2795\"><li data-start=\"2712\" data-end=\"2746\"><p data-start=\"2714\" data-end=\"2746\"><code data-start=\"2714\" data-end=\"2734\">.loop-product-page<\/code> \u2192 Shop page<\/p><\/li><li data-start=\"2749\" data-end=\"2795\"><p data-start=\"2751\" data-end=\"2795\"><code data-start=\"2751\" data-end=\"2773\">.single-product-page<\/code> \u2192 Single product page<\/p><\/li><\/ul><\/li><li data-start=\"2796\" data-end=\"2850\"><p data-start=\"2798\" data-end=\"2850\">Themes may apply different layout rules to each page<\/p><\/li><\/ul><p data-start=\"2852\" data-end=\"2921\">Using <strong data-start=\"2858\" data-end=\"2920\">page-specific CSS ensures predictable and stable alignment<\/strong>.<\/p><h5 data-start=\"2928\" data-end=\"2948\"><br \/>Best Practices<\/h5><ul data-start=\"2950\" data-end=\"3166\"><li data-start=\"2950\" data-end=\"3008\"><p data-start=\"2952\" data-end=\"3008\">Always match CSS to the selected button placement option<\/p><\/li><li data-start=\"3009\" data-end=\"3060\"><p data-start=\"3011\" data-end=\"3060\">Avoid using dynamic IDs (they change per product)<\/p><\/li><li data-start=\"3061\" data-end=\"3113\"><p data-start=\"3063\" data-end=\"3113\">Prefer plugin-specific wrapper classes for styling<\/p><\/li><li data-start=\"3114\" data-end=\"3166\"><p data-start=\"3116\" data-end=\"3166\">Test changes on both Shop and Single Product pages<\/p><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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. \ud83d\udc49 Do not mix CSS between settings.Each placement option (Inline \/ Underneath) [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[23],"doc_tag":[],"knowledge_base":[13],"class_list":["post-641","docs","type-docs","status-publish","hentry","doc_category-requirements-compatibility","knowledge_base-psm-request-a-quote"],"year_month":"2026-05","word_count":410,"total_views":"12","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Milind Ighe","author_nicename":"milindighe","author_url":"https:\/\/docs.psmplugins.com\/author\/milindighe\/"},"doc_category_info":[{"term_name":"Requirements &amp; Compatibility","term_url":"https:\/\/docs.psmplugins.com\/docs\/psm-request-a-quote\/requirements-compatibility\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"PSM Request a Quote","term_url":"https:\/\/docs.psmplugins.com\/docs\/psm-request-a-quote\/","term_slug":"psm-request-a-quote"}],"knowledge_base_slug":["psm-request-a-quote"],"_links":{"self":[{"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/docs\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":13,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/docs\/641\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/docs\/641\/revisions\/1162"}],"wp:attachment":[{"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/doc_category?post=641"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/doc_tag?post=641"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/docs.psmplugins.com\/wp-json\/wp\/v2\/knowledge_base?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}