[WooCommerce] Shop Page Won't Display Columns

I’m hoping that I’ve followed the rules appropriately and am posting this in the correct location. :-/ I’m working on putting together a blog and simple e-commerce site for my husband’s business. So far the blog is up and running nicely, and I’ve jumped into the WooCommerce plugin for his e-commerce needs. Here is the link to the e-commerce section: https://jamminjdcards.com/blog/shop/

I’m not very good with php, functions and/or back-end so that’s probably my issue. However I’d like for the “Shop” page to display all products in 2 columns. Right now it’s only showing them all in one column. If I can remember correctly, even when I first installed the plugin it only showed 1 column. Also it’s obviously important to mention I’m utilizing a custom theme.

I’ve been fighting with it for a couple of days coming across various codes on google – tried some dropped into functions.php, some into content-product.php. I can’t get any of them to work. I can’t tell if I have a front-end issue or a back-end issue going on here.

In an effort to try and narrow down the problem, I’ve tried the following: I’ve disabled my own style.css as it pertains to WooCommerce as well as WooCommerce’s CSS in their Setting section in the Dashboard. Here are some of the various markups I’ve tried:

<?php echo do_shortcode('[featured_products per_page="12" columns="2"]'); ?>

I tried this in the content-product.php page.

// Change number or products per row to 2
add_filter('loop_shop_columns', 'loop_columns');
global $woocommerce_loop;
$woocommerce_loop['columns'] = 2;

I’ve tried this in varying forms in the functions.php page

I’ve also installed the WooCommerce Product Archive Customiser in hopes that setting the columns to 2 in their Settings in the Dashboard would do the trick. All to no avail.

Here is my content-product.php page as it exists now:

https://pastebin.com/NNhDdvpj

And my functions.php page:

https://pastebin.com/LRH9jt6z

I’ve also opened the page in Firefox to utilize the Firebug plugin to see if I can discern a front-end problem. The only thing I can see (blindly, I’m sure) is that when I hover over the
<li> sections, they seem to highlight all the way across the white content area. Which seems to me that it wouldn’t be able to make 2 columns, if they were the full width of the page. But even when I apply css to these </li>
sections to narrow down the width, it still doesn’t work.
Please help ??