Title: Styling issue when using shortcodes Last modified: January 2, 2020 --- # Styling issue when using shortcodes * Resolved [deuce25](https://wordpress.org/support/users/deuce25/) * (@deuce25) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/) * On the normal product category page [HERE](https://medusaimports.com/product-category/wine-spirits/gorghi-tondi/) the styling is fine but when I use a shortcode to put products on a page like [HERE](https://medusaimports.com/gorghi-tondi/) I lose the styling for things like the product title and “Ordering only available…” box. * Why is that and how do I fix it? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyling-issue-when-using-shortcodes%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 8 replies - 1 through 8 (of 8 total) * [crslz](https://wordpress.org/support/users/crslz/) * (@crslz) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12285597) * Hi, * This because the styling rules from the css file in your theme are applied as follows * just an example * ``` .woocommerce-page .product { color: # 000; } ``` * and on the 2nd link the .woocommerce-page class is missing between the ``tags * Or you have to add custom css. Or you have to make sure that the missing class for the body tags is present. * This can be done in different ways, but it will require a little custom code anyway. I do not know to what extent you are familiar with this? * Regards * Thread Starter [deuce25](https://wordpress.org/support/users/deuce25/) * (@deuce25) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12288007) * Thanks for the info. I can do basic custom code/css if you can let me know what and where to add it. 🙂 * [crslz](https://wordpress.org/support/users/crslz/) * (@crslz) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12288748) * Hi, * Try adding this * ``` .products h2 { display: inline-block; float: none; position: relative; width: auto; min-height: 42px; color: #404040; font-size: 16px !important; font-weight: bold; line-height: 14px; text-transform: uppercase; } .products a.button { display: inline-block; margin: 0; padding: 10px 20px 10px 20px; border: none; border-radius: 4px; color: #fff; background: #e96656; font-size: 12px; text-align: center; text-transform: uppercase; } ``` * (Method 1) [https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/](https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/) * Regards * Thread Starter [deuce25](https://wordpress.org/support/users/deuce25/) * (@deuce25) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12289266) * Thanks! Works great but the product titles are not centered. I tried adding text- align: center; to products h2 but it didn’t work. What did I miss? * [crslz](https://wordpress.org/support/users/crslz/) * (@crslz) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12291452) * ``` li.product { text-align: center; } ``` * Thread Starter [deuce25](https://wordpress.org/support/users/deuce25/) * (@deuce25) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12293022) * Thank you so much, crslz!! * [crslz](https://wordpress.org/support/users/crslz/) * (@crslz) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12293660) * You’re welcome. I notice some differences between the 2 pages (see image) * [https://pasteboard.co/IOxcZVS.jpg](https://pasteboard.co/IOxcZVS.jpg) * 1) CHANGE * ``` .products h2 { ... min-height: 42px; } ``` * TO * ``` .products h2 { ... min-height: 44px; } ``` * 2) ADD * ``` li.product .price { float: left; width: 100%; height: auto; min-height: 40px; padding: 10px 0; line-height: 20px; text-align: center; } ``` * 3) ADD * ``` .products a.button:hover { color: #fff; background: #cb4332; } ``` * If this works for you, can you mark this topic as ‘resolved’. * Regards * [Austin M – a11n](https://wordpress.org/support/users/apmwebdev/) * (@apmwebdev) * [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12329724) * We haven’t heard back from you in a while, so I’m going to mark this as resolved– if you have any further questions, you can start a new thread. Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Styling issue when using shortcodes’ is closed to new replies. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) ## Tags * [styling](https://wordpress.org/support/topic-tag/styling/) * 8 replies * 3 participants * Last reply from: [Austin M – a11n](https://wordpress.org/support/users/apmwebdev/) * Last activity: [6 years, 4 months ago](https://wordpress.org/support/topic/styling-issue-when-using-shortcodes/#post-12329724) * Status: resolved