- This topic has 6 replies, 5 voices, and was last updated 3 years, 11 months ago by
.
-
Posts
-
Hi People of GP, I would like to show you an woocommerce shop I restyled using GeneratePress in the latest weeks.
This was for a client for which I’ve been doing small services in the latest year and every time I came to work into the website the Theme that was installed (Woopress from 8theme – Themeforest) kept getting in between my intentions and the final product. It was a real nightmare.
Not that the theme was bad “per se”, it actually worked quite nice, only if you didn’t need to make any modification/overrides to the template files or use a plugin that wasn’t bundled…
The other really bad thing about that theme was that many shop-related functionality was included within the theme, in my case, the most painful discovery was to realize that a custom taxonomy heavily used (The Brand Taxonomy) was part of the theme. My client was also using a custom tab in the product page also added by the theme (we just removed that custom tab).
You can already imagine how hard was to do a full theme change… specially if you weren’t in the position of asking for a budget increase.
So, this was something that I had to do all on my expenses and for the good of my client and also for the good of my mental health while working on the site in the future. So I decided to go all-in into the theme substitution. For free 🙁
The switch didn’t go without some struggles, specially integrating woocommerce in a similar fashion as it was behaving with the previous theme but working on those “missing parts” was actually a really enjoyable experience
I’ll try to document the most important parts as an inspiration (or critic) if you encounter a similar situation 🙂
* * * * * *
One of my priorities was to remove every plugin that was too heavy or that was used only for minor stuff in the original theme, this is the list of plugins that I wanted to remove/replace since the begining:
– Slider Revolution => Replaced with Metaslider Free
-> Used only for one slider in the home page (-30€/yr in licenses)
– WPBakery Page Builder => Replaced with Siteorigin Page Builder
-> Used only for the homepage (-60€/yr in licenses)
– Ultimate Addons for WPBakery Page Builder (removed)
-> Used only for a couple of widgets in the homepage (-30€/yr)
– Essential Grid (removed)
-> This was so funny, a plugin this big only to handle the columns in the footer! (-30€/yr)If you consider also the cost of the theme + extended support, just switching the theme and replacing plugins allowed my client to save around 250€.
You might say that when you buy one of those themes you have access to the new versions of the bundled plugins as they get published but if you don’t have the active licenses you need to manually update and that’s really a pain in the back.There was a feature that was completely missing and that I didn’t have the knowledge to do it by hand: The Add to Cart Pop-Up.
I fixed that with a plugin that is not the best in the world but it works really well and with no surprises: WooCart Pro from codecanyon (+30€/yr).Regarding the Brands Taxonomy I wanted to code those from zero but there’s a really nice plugin in the official wp repo that works beautifully, it is called “Perfect WooCommerce Brands” from a talented spanish developer.
The last plugin that I have in the black list and “soon to be removed” is Yoast SEO. But that’s another history. I will replace that with The SEO Framework as soon as I can… and that’s another 80€/yr of savings.
* * * * * *
Now to the main tweaks to the woocommerce behaviour in GP
1. The product list widget:
Original:
Without mods:
Now:The main things changed were the size and position of the thumbnails and removing the star rating:
This is the CSS for The product list widget:
/*Woocommerce Product listing widget*/ .woocommerce ul.product_list_widget li { margin-bottom: 13px; } .woocommerce ul.product_list_widget li img { float: left; margin-right: 10px; margin-left:0; width: 69px; height: auto; -webkit-box-shadow: none; box-shadow: none; } .woocommerce ul.product_list_widget .woocommerce-Price-amount.amount{ color:#fdc300; font-weight:bold; } .woocommerce ul.product_list_widget del .woocommerce-Price-amount.amount{ color:#000; font-size:0.8em; } .woocommerce ul.product_list_widget li a { font-weight: normal; line-height:1.3em; text-transform:uppercase; font-size:0.95em; } .woocommerce ul.product_list_widget li .star-rating{ display:none; }2. The Price filter:
Original:
Without mods:
Now:The CSS for the price filter:
/*Woocommerce Price filter*/ .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color: #dedede; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { width: 1em; height: 1em; background-color: #fdc300; border-radius:1em; }3. The product Page!
Original:
Now:In order to get that result I fiddle with some CSS targeting some typography elements that I couldn’t manipulate directly in the customizer plus some custom functions (snippets) for the previous/next on top/bottom of the product description and for placing the share buttons, provided by Scriptless Social Sharing Plugin, exactly where I wanted them.
For the previous/next buttons I used this little snippet from Businessbloomer in the functions.php of my child theme:
/** * @snippet Add next/prev buttons @ WooCommerce Single Product Page * @how-to Watch tutorial @ https://businessbloomer.com/?p=19055 * @sourcecode https://businessbloomer.com/?p=20567 * @author Rodolfo Melogli * @testedwith WooCommerce 2.5.5 */ add_action( 'woocommerce_before_single_product', 'bbloomer_prev_next_product' ); // and if you also want them at the bottom... add_action( 'woocommerce_after_single_product', 'bbloomer_prev_next_product' ); function bbloomer_prev_next_product(){ echo '<div class="prev_next_buttons">'; // 'product_cat' will make sure to return next/prev from current category $previous = next_post_link('%link', '← PRECEDENTE', TRUE, ' ', 'product_cat'); $next = previous_post_link('%link', 'PROSSIMO →', TRUE, ' ', 'product_cat'); echo $previous; echo $next; echo '</div>'; }Then, for the share buttons, after installing/configuring the Scriptless Social Sharing plugin I placed this in the functions.php of the child theme:
/*Scriptless Social Sharing*/ add_action( 'woocommerce_share', 'woocommerce_sapori_scriptless_sharing', 5 ); function woocommerce_sapori_scriptless_sharing() { echo do_shortcode('[scriptless]'); }The brand taxonomy is set up using the included panel of the Perfect Woocommerce Brands plugin.
This plugin is a little jewel from the repo.4. The Woocommerce cart and checkout pages in mobile
I invested a lot of time configuring the cart page, it is far from perfect and there’s a lot of dirty CSS in there but I was in a rush (and I’m not really good with css)
This is how it was in the original theme
This is how it looks in generatepress with no mods:
And this is how it looks with the CSS tweaks:It is not exactly as it was before but it works fairly nice and you don’t need to override any woocommerce template.
There’s a lot to improve in the css, I know…
Here it is:@media only screen and ( max-width: 768px ) { /*Romove Alternate rows shading*/ .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{ background: transparent; } /*Aligning Text in cart table*/ .woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td { text-align: left !important; } /*Too lazy to remember why I did this one*/ .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before{ content: none !important; } .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail{ display: block !important; } /*Fixing Coupon Area*/ .woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr { display: block; clear: both; /*min-height: 120px;*/ border-bottom: 1px solid #ededed; padding: 0; } .woocommerce-cart .cart-collaterals .cart_totals table th{ display: block; width:90%; } /*Removing Borders bottoms on checkout table*/ .woocommerce-cart-form__cart-item.cart_item td { border: none !important; } /*Product Remove*/ .woocommerce-cart-form__cart-item.cart_item .product-remove { width: 5%; float: left; padding: 0; } /*Product Thumbnail*/ .woocommerce-cart-form__cart-item.cart_item .product-thumbnail { width: 20%; padding: 4px; float: left; } .woocommerce-cart table.cart img{ width: 100%; } /*Product Name*/ .woocommerce-cart-form__cart-item.cart_item .product-name{ width: 70%; float:left; padding: 5px 2px 10px 2px; } .woocommerce-cart-form__cart-item.cart_item .product-name{ font-size: 11px; } /*Product Price*/ .woocommerce-cart-form__cart-item.cart_item .product-price { width: 30%; padding: 5px; float: left; font-weight: bold; font-size: 14px; } /*Product Quantity*/ .woocommerce-cart-form__cart-item.cart_item .product-quantity { display: inline-block; float: right; padding: 0; } /*Product subtotal hide*/ .woocommerce-cart-form__cart-item.cart_item .product-subtotal{ display: none; } /*Total price before pay button*/ .shop_table .order-total .woocommerce-Price-amount.amount { font-size: 1.5em; } .shop_table .shipping .woocommerce-Price-amount.amount { font-size: 1.3em; } }4.1 I also touched the navigation in my account page (mobile) with this code:
This is how it looks now:
(I still can’t figure out why the chevron-bottom icon is not working… it does not show on chrome-android completely and I’m cool with that.)
@media only screen and ( max-width: 768px ) { /*My account tabs*/ .woocommerce-MyAccount-navigation ul{ border: none !important; text-align: center; } .woocommerce-MyAccount-navigation ul li { display: inline-block; border: none !important; padding: 3px !important; width: 47%; text-align: center; } .woocommerce-MyAccount-navigation li a, .woocommerce-MyAccount-navigation li a:hover{ padding: 13px 0 !important; border: none !important; background: #f9f7f7; border-radius: 3px; } }5. Login/Logout/My Account links
This was the most hilariously elaborated tweak of all the project: To have the login/logout/my account dynamic links displayed somewhere.
Long story short, I created a shortcode for that using a slightly modified collectivearray.com snippet
The original snippet was for displaying those links in the main menu:
https://www.collectiveray.com/wordpress/wordpress-tips-and-tricks/add-login-logout-links-to-the-woocommerce-menu.htmlthis is how I tweaked it to be used as a shortcode to be placed in a text widget in the top bar area:
Loged out:
Loged in:/*Login Logout Shortcode*/ /* Original: https://www.collectiveray.com/wordpress/wordpress-tips-and-tricks/add-login-logout-links-to-the-woocommerce-menu.html*/ add_shortcode( 'sapori-woo-login', 'sapori_add_loginout_link', 10, 2 ); function sapori_add_loginout_link( $items, $args ) { if (is_user_logged_in()) { $items .= '<span class="loglink myaccount"><a href="'. get_permalink( wc_get_page_id( 'myaccount' ) ) .'orders/"><i class="fas fa-user"> </i> Il Mio Account</a></span> '; $items .= '<span class="loglink logout"><a href="'. wp_logout_url( get_permalink( woocommerce_get_page_id( 'myaccount' ) ) ) .'"><i class="fas fa-sign-out-alt"> </i>Disconetti</a></span>'; } elseif (!is_user_logged_in()) { $items .= '<span class="loglink login"><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '"><i class="fas fa-sign-in-alt"> </i> Accedi</a></span>'; } return $items; }And the CSS for that:
/* Login-Logout on top bar*/ .loglink.login a, .loglink.myaccount a { background: #1fb21c; padding: 5px 10px; } .loglink.login a:hover, .loglink.myaccount a:hover{ background: #60d321; color:#fff; } .loglink.logout a{ background: #fda000; padding: 5px 10px; } .loglink.logout a:hover{ background: #ffcd24; color:#fff; }* * * * * *
Apart of that there’s nothing I can remember that’s worth mentioning in this thread.
The website is this
https://www.saporidelbelice.com
I still have to clean up some stuff here and there, configure caching, see If I can fix some fontawesome related stuff…
I want to point also to a software and a plugin that greatly helped me recreating the full category tree:
The eMagicONE Store Manager for Woocommerce
https://woocommerce-manager.com/And Woocommerce Advanced Bulk Product Edit
https://codecanyon.net/item/woocommerce-advanced-bulk-edit/8011417If you have a large store you’ll absolutely love those.
Thanks Tom for providing us with such a great theme.
Please report back if there’s something I’m doing brutally wrong 😉Lead Developer
Amazing stuff, Roberto. Thank you so much for taking the time to share all of this! I’m sure it will be very helpful to a lot of people 🙂
Roberto
Thanks for posting.
If you want to go even lighter you can get rid of your scriptless social sharing plugin.
There is a hook to insert under the meta on the single product page.
You use a function in functions.php file to insert your onclick social urls into the woo single page template.
You use the fontawesome icons already onboard with GP.
And then just style your icons with a few lines of css for active and hover.
You might like to add your add your Woo build to the GeneratePress Examples Showcase Gallery:
Hello, this is really good work and, because it has so many elements in it, it shows up in every search I do in this forum and takes forever to scroll past. Any way to change that? Good stuff, just don’t want to see it every time I search for something.
Thanks,
Dwight
Hmm, unfortunately we would need to show excerpts in the search results, which likely wouldn’t be very helpful.
oK, Thanks, I was afraid that was so.
Thank you, Roberto. Your post is perfect for GeneratePress’s fans. Your CSS code is what I really for my websites.
Thank you Tom and GeneratePress team for all.
- You must be logged in to reply to this topic.