-
-
Hello – I have a few things I’d like help customizing, if possible. I’ve looked on the wordpress.org forums and figured out most of my changes, but I think these changes are specific to the theme, so I’m hoping you can help:
1. I’d like to change the size of product image and the number of columns for the products showing as cross-sells in my cart. Right now the images are very large, and 2 across. I’d like them to be half the size and 4 across – the exact same formatting as the “related products” that show up at the bottom of the individual product page.
2. I’d like the product layout for the store (including for a category or a subcategory) to have 4 products/columns rather than 3 – again, like the “related products” layout mentioned above.
3. The box that shows on the variable product page (with the attribute name) next to where you make your selection, is not formatted well. The text is all the way to the left, rather than being centered. I’d like to center the text or, if that isn’t possible, remove that box completely.
4. I’d like to change the size of the “update cart” and “proceed to checkout” buttons (I’d like to make them smaller to fit the text).
My site isn’t published yet, but I’m happy to send you a private message with my credentials to log in, if you need to see what I’m talking about (or I can email you screenshots.) Thanks!
-
Hello,
1- Please go to file wp-content\plugins\woocommerce\includes\wc-template-functions.php and find this function:
function woocommerce_cross_sell_display( $posts_per_page = 2, $columns = 2, $orderby = 'rand' )
edit post per page and columns value from 2 to 4. Save changes and refresh cart page.2-Do you mean that you want 4 column of products in shop page? In this case just remove the sidebar from shop page.
3-Please send a link where is this. So i can understand better.
4-Add this code into your custom css box:
table.cart td.actions .button, table.cart td.actions .checkout-button { padding: 13px 10px !important }Best regards!
-
Mihaila –
1. Can I reach this file through the WP dashboard where I find functions.php (Appearance>Editor) or do I have to access it another way?
2. I do not have a sidebar in the shop page – though there is a large blank space on the right where I presume the sidebar would show. Is there an additional setting I need to change somewhere?
3. I’ll send you my credentials in a private message (since my site isn’t live yet) with a link.
4. Thank you! That worked. However – I just noticed that the font in the “proceed to checkout” button is different than the font in “update cart” and “apply coupon” – can you help with that? Is that due to the code I added to move the “proceed to checkout” button up further on the page?
Thanks!
Rebecca
-
-
-
Hello,
1-You can access the file by going to Plugins > Editor, select woocommerce plugin. In the list of files, choose the includes\wc-template-functions.php file. Or access it via ftp.
2-You had selected layout with sidebar in shop page options. I edited it to full width. Please check it.
3-I added this code into your custom css box:
.woocommerce #content div.product form.cart .variations td.label, .woocommerce div.product form.cart .variations td.label, .woocommerce-page #content div.product form.cart .variations td.label, .woocommerce-page div.product form.cart .variations td.label { padding-left: 1em; }4-I added this code:
input, button, select, textarea { font-family: Raleway,Verdana, Geneva, sans-serif !important; }Best regards!
-
Mihaila –
1 – It worked – thank you!
2 – Thank you!
3- Thank you! The text looks great. Now, is there any way to put a small amount of padding between the grey square and the selection box?
4- Thank you!
-
Hello,
3-Yes, just add this line into your custom css box:
table.variations { border-spacing: 10px; border-collapse: separate; }Best regards!
-
Mihaila –
Thank you, that looks great!
However (sorry, I really thought I was done with this part) looking at the user experience now when I see this section, it is confusing. The price seems to be floating in an odd position, down in no man’s land above the number of items – I didn’t see it at first. Here is a link to the exact page again: https://66.147.244.177/~lavendl6/product/lavender-essential-oil-intermedia-blend
1. Is there any way to move the price so it appears directly in between the number of items and “add to cart” button? So basically, on that same row of the table? The “add to cart” button might need to scoot a little to the right.
2. Can I remove “clear selection” completely? I think it’s cluttering it up and making it harder to see the important info.
You have been so incredibly helpful – I really appreciate it.
Rebecca
-
Hello,
1-This requires html changes along side css. Sorry but this is beyond support service.
2-To remove “clear section” add this code into your custom css box:.single-product a.reset_variations { display: none; }Best regards!
-
-
Mihaila (and others who are looking in the future): The code above didn’t work until I added !important to the end.
.single-product a.reset_variations { display: none !important; } -
Mihaila –
After the most recent update, I’m having issues with #1 (above) again – I would like my “Items you might be interested in” in the cart page to be 4 across. I checked the code you gave me above for the wc-templates-functions.php file and couldn’t find that exact code any longer: <span style=”background-color: #f9f9f9; color: #4b4d4d; font-family: Inconsolata, Consolas, Monaco, ‘Lucida Console’, monospace; font-size: 15px;”>function woocommerce_cross_sell_display( $posts_per_page = 2, $columns = 2, $orderby = ‘rand’ </span>
Instead, what I found was: function woocommerce_cross_sell_display( $limit = 2, $columns = 2, $orderby = ‘rand’, $order = ‘desc’ ) { global $woocommerce_loop;
I changed the $limit and $columns to 4, but I still don’t have 4 products – I now have 3 (it seems the margins may be off.)
I also have this code in my CSS:
.woocommerce-cart ul.products li.product.columns-2 {
margin-right: 1%;
width: 24.25%;
}
Can you tell me if I need new/different code to make this change, or if there’s a change I need to make going forward so I can fix this for future updates?
Thanks!
Rebecca
-
Hello,
The file wp-content\plugins\woocommerce\includes\wc-template-functions.php still has this function present:
function woocommerce_cross_sell_display( $posts_per_page = 2, $columns = 2, $orderby = 'rand' )
Can you fill in the ftp in your profile data? So we can check the woocommence files.Best regards!
-
Mihaila – I apologize, I’m unsure what you mean by FTP profile data – do you mean the credentials to log into my site host (bluehost) to access the files? Since the wp-content/plugins/woocommerce/includes/wc-template-functions.php file can be accessed through my WordPress dashboard, why do you need to get into the FTP files? Is this what I did wrong? Is the file I can access through WP not the same file as if I found it in FTP?
I’m just slightly hesitant to give access to the back end of my site over the internet.
-
Hello,
Yes, you are right. I check the file from the Plugins > Editor menu. The function is there. It’s the same, it only has one variable added. See screenshot.
However that was not the responible file for this case. The right file to edit is woocommerce/content-products.php inside the tower theme folder.
I edited out this line:// Increase loop count //$woocommerce_loop['loop']++;to this:
// Increase loop count $woocommerce_loop['loop']++;As you see we only uncommented out the woocommerce loop. Please check this product page, the products are displaying in 4 columns (screenshot).
Best regards!
-
Thanks Mihalia! However, that wasn’t the issue I was asking about. I want the cross-sell items in the cart page to show as 4 columns, and they don’t. The initial code you gave me last year has changed (as we both noticed) and is no longer:
function woocommerce_cross_sell_display( $posts_per_page = 2, $columns = 2, $orderby = ‘rand’
Instead, as I noticed (and you confirmed) it is now:
function woocommerce_cross_sell_display( $limit = 2, $columns = 2, $orderby = ‘rand’, $order = ‘desc’ ) { global $woocommerce_loop;
As you can see in the screenshot you showed me, I changed the columns in the above code before I contacted you a few days ago, and it didn’t work. The cart is showing 3 products rather than 4 (with a large blank area on the right where the 4th should fit) – perhaps the margins are off? Again, I also have this code in my CSS:
.woocommerce-cart ul.products li.product.columns-2 {
margin-right: 1%;
width: 24.25%;
}Do I need to remove or update that CSS code?
Thanks!
Rebecca
-
Hello,
Can you please post the link of where these products are? So there are no more misunderstandings.
Best regards!
-
Mihalia – I can’t post a link because it is related to the cart. These are the products that are “cross sell” products at the bottom of the cart page. In order to see what I’m talking about, you’ll have to first add an item to the cart and then go to the cart page.
-
Hello,
I do get 4 products in the “You may be interested in..” even in the Cart page. See screenshot: https://pho.to/AfcM3
Perhaps you saw a product that did not have much related products to align in first place.
Let us know.Best regards!
-
Mihaila – it definitely does not look that way on my screen:
Rebecca
-
Hello,
I see you are using the Opera browser. My screenshot is taken from the Chrome browser. However, i opened your site from Opera as well and still the products are in 4 column. See screenshot: https://pho.to/AfmKB
Also i tried reducing the screen and still i got the same result, screenshot: https://pho.to/AfmKW
Please clear cache and refresh pages.Best regards!
-
Mihaila – thanks for your help. I followed your instructions and cleared the cache for every browser, and it does look as it should.
I had set all my browsers to clear the cache when they close (to avoid this issue), but hadn’t reviewed the settings in a while – after updates they must have all defaulted to old settings. I’ll be sure to clear the cache before working on the site in the future.
Thanks again.
-
Hello,
Nice to know it’s all good now.
Let us know for anything.Best regards!
-
You must be logged in to reply to this topic.