Woocommerce PHP Code Help

It may be the individual right/left divs and their associated CSS do not work right with woo’s unordered list (ul, li tags). From what I understand of CSS, the divs are stacking up correctly, though not in the way you want.

I would try altering the loops so that only one left div and one right div is generated, instead of one for each product. In that situation, I believe the divs will stack correctly and the correct products will be in each column. No guarantees, but worth a try. If nothing else, finding the right CSS for 2 containers is easier than 4.

There’s any number of column solutions on the ‘net, one of them would surely work with woo’s unordered list. The key trick is the sorting of products into the correct column div using modulo 2, which should be easily adapted to many column solutions out there.

Hmm interesting. I didn’t think about woo’s ol and ul. I’ll look into it tomorrow and see if that can’t be remedied.

I’m not sure exactly how to implement the divs as you are saying. Right now you can see how the code is set up in pastebin. One item is in a left div, rewind posts and another in a right. Do you have a suggestion on how to generate just one left div and one right div since it’s generated on a loop? I see what you mean, just not sure how to accomplish it.

And sorry – I’m not sure what you mean by “Modulo 2”?

I don’t actually know for sure where the list tags are coming from, I assumed it was woo, it may be your theme, all I really know is they weren’t in the perishable press example, their’s works (presumably), and yours doesn’t. It may not be the reason at all.

You current flow distills down to this:

Start Odd Loop
  Left Div, product, end div
End Loop, Rewind
Start Even Loop
  Right Div, product, end div
End Loop

I’m suggesting a single left and right div will be easier to generate working CSS for:

Left Div
  Start Odd Loop
    products
  End Loop, rewind
End Div
Right Div
  Start Even Loop
    products
  End loop
End Div

Try rearranging your code accordingly. Keep a original backup in case this doesn’t work. Once the output is rearranged, you’ll possibly need to come up with CSS to arrange each div properly, though there’s a good chance the current CSS will work.

But if you can eliminate the list tags, either from woo or your theme, so that your HTML is essentially identical to perishable press’ example, that should work even better.

“Modulo 2” is the code that does the odd even thing: ($i % 2). You will often see “modulus” for this, but it is a misnomer, the correct term is “modulo”. Sorry for the confusion, as a coder, I tend to be overly pedantic ??

No worries – I was looking for pedantic to help me out with this anyhow. ?? Thanks for the clarification on the modulo meaning – one day I will learn PHP.

We’re getting so close! Check out the page now: https://jamminjdcards.com/blog/shop/ It’s working fantastically – exactly what I was looking for, but unfortunately it has led to a couple more questions:

#1: They are displaying in perfect order and in their appropriate left and right divs now. But I’m realizing now that each product is of varying height depending on the product title. Is there any way for each row to be on the same height line, not dependent on the height of the products above it? Does that make sense?

#2: If you use the sub-navigation adjacent to the “BOX BREAKS” title, there are 3 categories. “Football” should have 2 of the products seen on the main shop page. “Basketball” should have 0. “Misc Sports” should have the other 2 products seen on the main shop page. As you can see only one of them is being displayed for some reason – all other content after it is being ignored – such as the footer with the copyright. Any ideas why this is happening?

So much thanks again for your help! I can’t tell you how long I’ve been struggling with this trying to get it to work ??

Yes, I see the height issue. The first issue is each card is in div with an id of “item”. This is non-compliant HTML, only one element on a page can have a given id. If this can be changed to class=”item”, that would be compliant, it would make dealing with the height issue easy, and there doesn’t appear to be any adverse effect to doing so.

Then if you add this CSS rule, the heights should even out:

.item {
   height: 370px;
}

If any box should be more than 370px (you may need to adjust this value), the heights will become uneven again, the height style behaves more like a min-height. In fact, the whole way heights are dealt with by various browsers have been very inconsistent in the past, not sure if it’s better now or not. Check you layout in as many different browsers as you can.

Getting elements to layout evenly under all conditions using pure CSS is sort of a nightmare, I’m often tempted to go back to the old table layout technique.

As for the sub-page content, it appears some error is being thrown that is stopping the remainder of the output. I’m getting a TypeError f is null from twitterFetcher_v10 and the last output on the page is

<script type="text/javascript">
	st_go({v:'ext',j:'1:2.5',blog:'57883878',post:'0',tz:'-7'});
	var load_cmc = function(){linktracker_init(57883878,0,2);};
	if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
	else load_cmc();
	</script>

Which is really strange as this is not output on the main page until a lot of other stuff is output. All this could be just misleading side effect and mean nothing. I’m suspicious the column loops could be failing with small result numbers. Define WP-DEBUG as true in wp-config.php, then load the sup-page and see if any messages come up.

Duh. Should have realized just setting a static height would have done the trick. It definitely looks much better now, thank you ?? I checked it out on the versions of Chrome, IE, Firefox and Safari that I have installed and they all look good. Will test more versions of each before launch.

I didn’t realize you could only have one element per page with a given id! See what happens when you teach yourself HTML… It makes sense when I think about it, obviously. So essentially, because the id of “item” is on a loop, it’s being used more than once on the page in the final output, correct?

So now just the sub-categories. I defined the WP-DEBUG as true in the wp-config file – very helpful throughout the blog! I went ahead and left it as such so you can see what the products page is saying: https://jamminjdcards.com/blog/shop/ as well as the sub-category page: https://jamminjdcards.com/blog/product-category/box_breaks_football/

You’ll see they both start with the same error message concerning the undefined variable “i” on line 81. The sub-categories page, however, gets a little deeper with 2 other error messages below the item – all still pertaining to line 81 in the same archive-product.php template.

In the document I’m looking at (which is a little different from the pastebin you saw previously) says line 81 is the following:

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

Here is a latest archive-product.php code: https://pastebin.com/SNyJmqQ9
Unfortunately I have no idea what any of these error messages mean on either page! ?? Do you have any ideas?

Another idea, in relation to your comment about the twitterFetcher_v10: Since the day I first called the script in my header for that, it’s stated that Line 16 had a syntax error. It didn’t make any sense to me as that line contains no code. But the line following it does contain the script for the twitterFetcher. Might have something to do with what you’re seeing – OR the sub-categories display issue.

Here is the code for my header.php file which contains the code I’m speaking of: https://pastebin.com/FTXgGapX

Again – I really, really appreciate your time and help!

Undefined variable i is easy, you need $i = 0; before entering the while loop. As it is you’re trying to increment a variable that does not exist.

The non-object fatal error is definitely what’s killing the remaining output. Notices like undefined variables do not stop execution. Unsurprisingly, fatal errors do. Not sure why it’s not a problem on the main page but is on a sub-page. The only thing I can think of is to declare global $wp_query; before entering the while loop.

As I suspected, the javascript error is a mislead, has nothing to do with the display issue. It’s still a minor issue, but lots of pages have javascript errors but otherwise appear fine. The line number discrepancy is common. Either a different counting algorithm is used or the line is where the parser determined there is a problem though the actual problem is one or more lines up (but never down). In any case, the error I see is in the minified javascript file, nothing you can do about it I suspect. The syntax error you’re seeing could be the script on the line above is missing a terminating “;”, which is correct in this context, I’m guessing the PHP parser just doesn’t understand null javascript functions. Or there’s another error I’m not seeing, or perhaps some sort of whitespace issue which probably got stripped out of the pastebin version. May not be worth worrying about.

Don’t leave WP_DEBUG as true for too long, it’s a small security risk, it gives hackers an indication if their efforts are having the desired effect.

Success!!

Looks like declaring global $wp_query; did the trick! I placed the following code above the while loop:

<?php

$i = 0; 

global $wp_query;

?>

and everything fell right into place. No more sub-category issues – all the correct products are showing up as they should.

Thanks so so much again for your help. I tell you seriously I’ve been trying to get this to work for a couple of months now, so I can’t thank you enough! Made my day. ??

Thanks also for all the tips regarding WP_DEBUG and things like the line number discrepancy. I always appreciate learning all that I can about the coding world. ??

Your obvious joy is exactly why I do support here ??

You are most welcome. I love making people happy.