Topic: Woocommerce Tutorial - Missing images for sample products??????

random free asked 3 years ago


Expected behavior - After following "Wordpress Woocommerce Tutorial" Expected Woocommerce page to appear same as in MDB Tutorial Example

Actual behavior - The first "SHOP" page does not look the same as example - no images or formatting as the example (except for the head and footer which are good- as per MDB wordpress tutorial (see screenshots)

Environment - Latest Wordpress - MAMP and components latest - Updated browsers - Latest Woocommerce - MDBootstap 4

Going through the Wordpress MDBootstrap tutorial successfully using localhost -

I have gotten to the step where I have imported the sample data from "WooCommerce Products CSV" as instructed in the tutorial.

The tables show up in the Admin > Woocommerce > Products and everything SEEMS to be OK... However No Product Images !!!!!

Resources (screenshots, code snippets etc.)

Here are screenshots of what I am looking at to help you:

https://random-specific.com/MDB-Woo/ScreenShot-01.png woocomm Status Menu

https://random-specific.com/MDB-Woo/ScreenShot-02.png Import CSV complete

https://random-specific.com/MDB-Woo/ScreenShot-03.pngProducts page/ Menu

https://random-specific.com/MDB-Woo/ScreenShot-03.pngWP Admin Pages Menu

https://random-specific.com/MDB-Woo/ScreenShot-05.pngTheme > Store Page

https://random-specific.com/MDB-Woo/ScreenShot-06.pngWP Admin Media Library ( no thumbnails!!!!)

Going through Forums here and Woocommerce site I have found nothing similar.

Help please> How to Fix?

Otherwise a really good and useful tutorial and appreciated VERY much!

Thanks in advance!

++++++++++++++++++++++++++++++++

UPDATE:

I decided to look inside of sample_products.csv to see if that was the source of the photos, and yes, the URLs for the photos are there. So I downloaded each of the photos into a folder and have them now.

That changes the objective of the request for help a bit.

Now, with the photos in hand the issues become:

  1. Where to put them so that woocommerce, wordpress and database have expected access to them and how to do so without breaking anything?

  2. Do they need an enclosing folder / directory and if so what to call it?

  3. Is this the best way to fix the issue, or, is there an updated sample_products.csv to match the latest version of woocommerce (which just came out 2 days ago) - or another way entirely?

Thanks again


random free answered 3 years ago


This is in regard to my own post, above. I kept at it, exploring options, until I found a solution for this portion of the issue. Hopefully by posting here it will help any one else experiencing a similar problem either with the tutorial in reference or a similar issue.

!!!-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-!!!

My Solution:

WIth regard to the issue of the images and formatting not showing in my site, I discovered after a bit more investigation, that in order to make my site match the example, I had to do a couple of things that were omitted in the explanation and steps that were outlined in the tutorial.

The “missing” images (img files themselves) are in fact not missing at all, but just not being called from their remote location. When I imported sample_products.csv, as instructed in the tutorial, all of the necessary tables for the database were indeed imported, BUT, for some reason the images, and their REMOTE locations, which are each there in the sample_products.csv, did NOT. For whatever reason. Changes and updates to Woocommerce, WordPress, or changes to the filesystem at MDBootstrap, may individually or to all may be the reason, I don’t know.

What I DID discover, is a WORKAROUND. Seeing that the images are indeed listed in the database of the sample_products.csv, I simply visited the location of each one individually, in my browser, then saved each one in a folder on my desktop.

As well, earlier I had also discovered, that as is normal, after installing the woocommerce plugin, WordPress has a woocommerce Admin menu that lists the “Sample Products” (from this tutorial) under Woocommerce > Products > All Products. There I could see all of the correct data that was imported from sample_products.csv. The only thing missing, the product images. However by clicking on each image placeholder on each line, the information page for that product came up. Then, by going to the right hand sidebar column near the bottom, I clicked on “Add product gallery images” and added the correct corresponding image from the folder on my desktop, to the Media Library. Then ALSO added the same image, again, to the “Add product image” panel. FINALLY AND MOST IMPORTANT, CLICK THE UPDATE Button at the top right of the page. Now the correct pictures are showing up where they should in the menu.

Next issue was that the page for “Shop” on my site was not displaying the same as the example preview in the tutorial. I discovered the solution to this by downloading the source file in the tutorial for that step, and comparing every line of each file, to the corresponding files that I have. I then discovered that the tutorial author had simply neglected to explain the MOST IMPORTANT STEP for this page to display. In functions.php, he has the following code:

/**
 * Add WC Compatibility
 */
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Once I placed that into my functions.php, magically my page, on my site, for this point of the tutorial, matched and functioned perfectly as the author described. It only took me a couple of days of sleuthing to figure it all out. That making this tutorial no less good and valuable, but for me, I learned a lot more the hard way. I commend the author for their work and generosity, and hope that they will consider adding the solutions that I have found to their tutorial, so that others less patient than I, will not be put off and give up learning.

As well, it would be MUCH appreciated to be able to see the remaining tutorials, that were promised, to add the last bits of functionality to the Woocomerce /Wordpress tutorial example. Thank you again Dawid Adach for your good work.

Best tp all



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Desktop
  • Browser: chrome / Firefox / All
  • OS: Mac OS X
  • Provided sample code: No
  • Provided link: Yes