{"id":135,"date":"2022-01-03T14:11:59","date_gmt":"2022-01-03T14:11:59","guid":{"rendered":"https:\/\/www.rentdevelopers.ph\/blog\/?p=135"},"modified":"2022-03-15T15:43:22","modified_gmt":"2022-03-15T15:43:22","slug":"effective-woocommerce-styling","status":"publish","type":"post","link":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/","title":{"rendered":"Effective WooCommerce styling"},"content":{"rendered":"

There are multiple ways to make a WordPress theme compatible with WooCommerce. The recommended way will be to use hooks and style store elements globally. There is also the option to ‘override WooCommerce templates via theme’, but this has some downsides, such as possible conflicts with third-party plugins \/ difficulties when upgrading to newer versions of WooCommerce.<\/p>\n

Our goal will be to add a product listing with filters, styling all of the default shop views: Cart, Checkout, MyAccount, Product Page and add minimal shop styles.<\/p>\n

Add WC theme compatibility<\/strong><\/h3>\n

We have a WP theme that is not yet compatible with Woo \u2013 underscores<\/a>. What will be the most effective way to enable the shop functionality? Adding proper code to functions.php will make it happen.<\/p>\n

<?php\r\n\/\/ functions.php\r\n\/**\r\n * Define WooCommerce support\r\n *\/\r\nadd_theme_support( 'woocommerce' );\r\nadd_theme_support(\r\n    'woocommerce',\r\n        array(\r\n            'single_image_width'    => 1500,\r\n            'thumbnail_image_width' => 1500,\r\n            'product_grid'          => array(\r\n                'default_columns' => 3,\r\n                'default_rows'    => 4,\r\n                'min_columns'     => 1,\r\n                'max_columns'     => 3,\r\n                'min_rows'        => 1,\r\n            ),\r\n        )\r\n);\r\n\/**\r\n * Single product view\r\n *\/\r\nadd_theme_support( 'wc-product-gallery-zoom' );\r\nadd_theme_support( 'wc-product-gallery-lightbox' );\r\nadd_theme_support( 'wc-product-gallery-slider' );\r\n\/**\r\n * Move title before main wrapper\r\n *\/\r\nadd_filter('woocommerce_show_page_title', 'ct_woocommerce_show_page_title');\r\nfunction ct_woocommerce_show_page_title(){\r\n    return false;\r\n}\r\nadd_action('ct_before_main_wrapper','ct_woocommerce_before_main_content', 9);\r\nfunction ct_woocommerce_before_main_content(){\r\n    ?>\r\n    <header class=\"woocommerce-products-header mb-4\">\r\n        <h1 class=\"woocommerce-products-header__title page-title\"><?php woocommerce_page_title(); ?><\/h1>\r\n    <\/header>\r\n    <?php\r\n}\r\nfunction entry_content_class()\r\n{\r\n    if(is_front_page()){\r\n        return '';\r\n    }\r\n    if (is_woocommerce() || is_cart() || is_checkout() ):\r\n        echo 'entry-content--white';\r\n    endif;\r\n    if (! is_user_logged_in() && is_page('my-account') ):\r\n        echo 'entry-content--white';\r\n    endif;\r\n}\r\n<\/pre>\n
Create woocommerce.php<\/strong><\/h3>\n
A new file is needed – woocommerce.php , which will be used to render the shop listing. We’re also displaying built-in breadcrumbs and a sidebar shop with filters.<\/p>\n
<?php\r\n\/\/ woocommerce.php\r\n\/**\r\n * Main WooCommerce template\r\n *\/\r\nget_header();\r\n?>\r\n<?php woocommerce_breadcrumb(); ?>\r\n<?php do_action(\"ct_before_main_wrapper\"); ?>\r\n    <main id=\"primary\" class=\"site-main\">\r\n        <div class=\"entry-content <?php entry_content_class(); ?>\">\r\n            <?php woocommerce_content(); ?>\r\n        <\/div>\r\n    <\/main><!-- #main -->\r\n<?php\r\nget_sidebar('shop');\r\nget_footer();\r\n<\/pre>\n
Shop filters<\/strong><\/h3>\n
The function get_sidebar(‘shop’); will include the content of the sidebar-shop.php file. We want to have different filters: by category, by price, by attribute, by tags, by ratings. WC already provides widgets that will do the job. We’re going to use the_widget() function to render the proper filter.<\/p>\n
<?php\r\n\/**\r\n * sidebar-shop.php\r\n * Shop sidebar - filters\r\n *\/\r\nif(! is_shop() && !is_archive()){\r\n    return;\r\n}\r\n?>\r\n<aside id=\"secondary\" class=\"widget-area\">\r\n    <div class=\"widget-area-inside\">\r\n        <div class=\"entry-content <?php entry_content_class(); ?>\">\r\n            <?php the_widget( 'WC_Widget_Product_Categories', array('count' => 1, 'hide_empty' => 1) ); ?>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"widget-area-inside\">\r\n        <div class=\"entry-content <?php entry_content_class(); ?>\">\r\n        <h2 class=\"widgettitle\"><?php echo esc_html( 'Filters') ?><\/h2>\r\n        <hr>\r\n        <?php the_widget( 'WC_Widget_Price_Filter', array() ); ?>\r\n        <div class=\"widget--size widget\">\r\n            <?php the_widget( 'WC_Widget_Layered_Nav', array('title' => esc_html( 'Filter by size' ),'attribute'=>'size','display_type'=>'list', 'query_type' => 'or') ); ?>\r\n        <\/div>\r\n        <?php the_widget( 'WC_Widget_Layered_Nav', array('title' => esc_html( 'Filter by color' ), 'attribute'=>'color','display_type'=>'dropdown', 'query_type' => 'and') ); ?>\r\n        <?php the_widget( 'WC_Widget_Layered_Nav', array('title' => esc_html( 'Filter by size' ), 'attribute'=>'size','display_type'=>'dropdown', 'query_type' => 'or') ); ?>\r\n        <?php the_widget( 'WC_Widget_Rating_Filter', array() ); ?>\r\n        <?php the_widget( 'WC_Widget_Product_Tag_Cloud', array() ); ?>\r\n        <\/div>\r\n    <\/div> <!-- \/ widget-area -->\r\n<\/aside><!-- #secondary -->\r\n<div class=\"clearfix\"><\/div>\r\n<\/pre>\n
Adding shop styles<\/strong><\/h3>\n
Adding some basic styles will make the website look better and give it a custom look. Instead of overwriting every WC style, we’re going to add global styling for main elements, such as buttons \/ inputs and style main wrapper.<\/p>\n
\/**\r\nGlobal WooCommerce styles\r\n *\/\r\nbody {\r\n   background:#F5F5F5;\r\n}\r\n.entry-content--white {\r\n   background:#fff;\r\n   border-radius: 5px;\r\n   padding:2rem;\r\n}\r\n.button,\r\n.woocommerce #respond input#submit,\r\n.woocommerce input.button {\r\n   display: inline-block;\r\n   font-weight: 700 !important;\r\n   line-height: 1 !important;\r\n   text-align: center;\r\n   text-decoration: none;\r\n   vertical-align: middle;\r\n   cursor: pointer;\r\n   -webkit-user-select: none;\r\n   -moz-user-select: none;\r\n   user-select: none;\r\n   border: 1px solid transparent !important;\r\n   padding: 0.375rem 0.75rem;\r\n   font-size: 1rem;\r\n   border-radius: 0.25rem;\r\n   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\r\n   padding: 1rem 1rem !important;\r\n   font-size: 1.25rem !important;\r\n   border-radius: .3rem !important;\r\n   color: #fff !important;\r\n   border-color: #333 !important;\r\n   background: #333 !important;\r\n}\r\n.input-text {\r\n   font-size: 1rem;\r\n   padding: 0.375rem 0.75rem;\r\n   border-radius: 0.25rem;\r\n   color:#333;\r\n   font-weight: 400;\r\n   line-height: 1.3 !important;\r\n   background-clip: padding-box;\r\n   background: #FFFFFF;\r\n   border: 1px solid #E6E6E6;\r\n   -webkit-appearance: none;\r\n   -moz-appearance: none;\r\n   appearance: none;\r\n   min-height: calc(1.5em + (1rem + 2px));\r\n   padding: 1rem 1rem !important;\r\n   font-size: 1rem;\r\n   border-radius: .3rem;\r\n}\r\n<\/pre>\n
Styling store views<\/strong><\/h3>\n
Those custom CSS will adjust shop listing columns, display one product per row on mobile, add styles for My Account view for logged in users and style product categories link in the shop sidebar.<\/p>\n
\/**\r\nShop listing\r\n *\/\r\n.woocommerce-shop .site-main,\r\n.archive .site-main {\r\n   width:73.9130434783%;\r\n   float:right;\r\n   margin-right:0\r\n}\r\n.woocommerce-shop .widget-area,\r\n.archive .widget-area{\r\n   width:21.7391304348%;\r\n   float:left;\r\n   margin-right:4.347826087%\r\n}\r\n@media (max-width: 991.98px) {\r\n   .site-main,\r\n   .widget-area {\r\n      width:100% !important;\r\n      float:none !important;\r\n      margin:0 0 2rem 0 !important;\r\n   }\r\n}\r\n\/**\r\n   shop listing mobile\r\n*\/\r\n@media (max-width: 767.98px) {\r\n   .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {\r\n      width: 100%;\r\n      float: none !important;\r\n   }\r\n   .woocommerce-message .button {\r\n      display: block !important;\r\n      float: none !important;\r\n      margin-bottom: 10px !important;\r\n      clear:both;\r\n   }\r\n}\r\n\/**\r\nmy account - logged in user\r\n *\/\r\n.woocommerce-MyAccount-navigation {\r\n   background: #FFFFFF;\r\n   border-radius: 5px;\r\n   padding: 40px;\r\n   margin-bottom: 2rem\r\n}\r\n.woocommerce-MyAccount-navigation a {\r\n   color: #646464;\r\n   text-decoration: none\r\n}\r\n.woocommerce-MyAccount-navigation .is-active a {\r\n   text-decoration: underline;\r\n}\r\n.woocommerce-MyAccount-navigation ul {\r\n   list-style: none;\r\n   margin: 0;\r\n   padding: 0\r\n}\r\n.woocommerce-MyAccount-navigation ul li {\r\n   margin-bottom: 10px\r\n}\r\n.woocommerce-MyAccount-content {\r\n   background: #FFFFFF;\r\n   border-radius: 5px;\r\n   padding: 40px\r\n}\r\n\/**\r\nWooCommerce Filters\r\n *\/\r\n.product-categories {\r\n   padding:0;\r\n   margin:0 0 10px 0;\r\n   list-style:none;\r\n}\r\n.product-categories ul {\r\n   list-style:none;\r\n   padding:0;\r\n}\r\n<\/pre>\n
Wrapper for Cart, My account and Checkout<\/strong><\/h3>\n
We’re using global CSS class .entry-content–white as main wrapper with some padding and white background. Function <?php entry_content_class(); ?> controls when to add proper class. It will be good to apply it for other store views, like Cart, My Account and the Checkout form. Wrapper should be added in the page.php file. In underscores theme – <?php get_template_part( ‘template-parts\/content’, ‘page’ ); ?> is used, so we’re going to edit: template-parts\/content-page.php<\/p>\n
<?php\r\n\/**\r\n* \/\/ template-parts\/content-page.php\r\n *\/\r\n?>\r\n<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\r\n   <header class=\"entry-header\">\r\n      <?php the_title( '<h1 class=\"entry-title\">', '<\/h1>' ); ?>\r\n   <\/header><!-- .entry-header -->\r\n   <div class=\"entry-content <?php entry_content_class(); ?>\">\r\n      <?php\r\n      the_content();\r\n      wp_link_pages(\r\n         array(\r\n            'before' => '<div class=\"page-links\">' . esc_html__( 'Pages:', 'test123' ),\r\n            'after'  => '<\/div>',\r\n         )\r\n      );\r\n      ?>\r\n   <\/div><!-- .entry-content -->\r\n<\/article><!-- #post-<?php the_ID(); ?> -->\r\n<\/pre>\n
Underscores adjustments<\/strong><\/h3>\n
As described at the beginning, we’re using the Underscores starter theme, which is a clean, minimalistic WP theme. The last step will be to add basic adjustments: make the main wrapper container centered and add the helper function for clearing the floats.<\/p>\n
\/**\r\nunderscore adjustments\r\n *\/\r\n.site {\r\n   width: 100%;\r\n   padding-right: 15px;\r\n   padding-left: 15px;\r\n   margin-right: auto;\r\n   margin-left: auto;\r\n}\r\n@media (min-width: 576px) {\r\n   .site {\r\n      max-width: 540px;\r\n   }\r\n}\r\n@media (min-width: 768px) {\r\n   .site {\r\n      max-width: 720px;\r\n   }\r\n}\r\n@media (min-width: 992px) {\r\n   .site {\r\n      max-width: 960px;\r\n   }\r\n}\r\n@media (min-width: 1200px) {\r\n   .site {\r\n      max-width: 1140px;\r\n   }\r\n}\r\n@media (min-width: 1400px) {\r\n   .site {\r\n      max-width: 1320px;\r\n   }\r\n}\r\n\/**\r\nHelpers\r\n *\/\r\n.clearfix:after {\r\n   content: \"\";\r\n   display: table;\r\n   clear: both;\r\n}\r\n<\/pre>\n
WooCommerce customizations summary<\/strong><\/h3>\n
We have added WC support, and customized the look of the store using a minimal amount of code. Instead of Overriding templates, we’ve used hooks and built-in WC elements. This approach will pay off in the long run \u2013 upgrading to the next WooCommerce version will be smooth. Also, every WP plugin will be compatible with our \u201cminimal WooCommerce theme\u201d.<\/p>\n
Minimal WC styling preview<\/h2>\n
Let’s have a look at the results. Here is the product listing with filters.<\/p>\n
\"eshop\"<\/p>\n
Article originally published here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are multiple ways to make a WordPress theme compatible with WooCommerce. The recommended way will be to use hooks and style store elements globally. There is also the option to ‘override WooCommerce templates via theme’, but this has some downsides, such as possible conflicts with third-party plugins \/ difficulties when upgrading to newer versions […]<\/p>\n","protected":false},"author":1,"featured_media":203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[22],"tags":[39,37],"yoast_head":"\nEffective WooCommerce styling - RentDevelopers Blog<\/title>\n<meta name=\"description\" content=\"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effective WooCommerce styling - RentDevelopers Blog\" \/>\n<meta property=\"og:description\" content=\"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"RentDevelopers Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-03T14:11:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-15T15:43:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Link365 global solutions \/ rentdevelopers\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Link365 global solutions \/ rentdevelopers\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/\",\"url\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/\",\"name\":\"Effective WooCommerce styling - RentDevelopers Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp\",\"datePublished\":\"2022-01-03T14:11:59+00:00\",\"dateModified\":\"2022-03-15T15:43:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/d73cf9761894d2a3fed7e2802ff9ba58\"},\"description\":\"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage\",\"url\":\"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp\",\"contentUrl\":\"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.rentdevelopers.ph\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effective WooCommerce styling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/#website\",\"url\":\"https:\/\/www.rentdevelopers.ph\/blog\/\",\"name\":\"RentDevelopers Blog\",\"description\":\"#1 software house in the Philipinnes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.rentdevelopers.ph\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/d73cf9761894d2a3fed7e2802ff9ba58\",\"name\":\"Link365 global solutions \/ rentdevelopers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3ed3fd89ec3d71ea9fa705c110fd02f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3ed3fd89ec3d71ea9fa705c110fd02f?s=96&d=mm&r=g\",\"caption\":\"Link365 global solutions \/ rentdevelopers\"},\"url\":\"https:\/\/www.rentdevelopers.ph\/blog\/author\/rentdevelopers\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Effective WooCommerce styling - RentDevelopers Blog","description":"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/","og_locale":"en_US","og_type":"article","og_title":"Effective WooCommerce styling - RentDevelopers Blog","og_description":"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.","og_url":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/","og_site_name":"RentDevelopers Blog","article_published_time":"2022-01-03T14:11:59+00:00","article_modified_time":"2022-03-15T15:43:22+00:00","og_image":[{"url":"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp","width":1,"height":1,"type":"image\/webp"}],"author":"Link365 global solutions \/ rentdevelopers","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Link365 global solutions \/ rentdevelopers","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/","url":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/","name":"Effective WooCommerce styling - RentDevelopers Blog","isPartOf":{"@id":"https:\/\/www.rentdevelopers.ph\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage"},"image":{"@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp","datePublished":"2022-01-03T14:11:59+00:00","dateModified":"2022-03-15T15:43:22+00:00","author":{"@id":"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/d73cf9761894d2a3fed7e2802ff9ba58"},"description":"Effective Woocommerce styling is a part of a bigger strategy called UX. U can't afford to forget about that.","breadcrumb":{"@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#primaryimage","url":"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp","contentUrl":"https:\/\/www.rentdevelopers.ph\/blog\/wp-content\/uploads\/2022\/01\/Projekt-bez-tytu\u0142u-7.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/www.rentdevelopers.ph\/blog\/effective-woocommerce-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.rentdevelopers.ph\/blog\/"},{"@type":"ListItem","position":2,"name":"Effective WooCommerce styling"}]},{"@type":"WebSite","@id":"https:\/\/www.rentdevelopers.ph\/blog\/#website","url":"https:\/\/www.rentdevelopers.ph\/blog\/","name":"RentDevelopers Blog","description":"#1 software house in the Philipinnes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.rentdevelopers.ph\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/d73cf9761894d2a3fed7e2802ff9ba58","name":"Link365 global solutions \/ rentdevelopers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rentdevelopers.ph\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3ed3fd89ec3d71ea9fa705c110fd02f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3ed3fd89ec3d71ea9fa705c110fd02f?s=96&d=mm&r=g","caption":"Link365 global solutions \/ rentdevelopers"},"url":"https:\/\/www.rentdevelopers.ph\/blog\/author\/rentdevelopers\/"}]}},"_links":{"self":[{"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/posts\/135"}],"collection":[{"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":2,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions\/172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/media\/203"}],"wp:attachment":[{"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rentdevelopers.ph\/blog\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}