Mobile theme for Elite?

[Jon Kawamoto]

Hi Bill,

I have just installed the Elite theme on my website http://www.jkconditioning.com and it looks great!

2 things:

1) When looking at my site on a mobile device, it doesn’t look very nice e.g. layout, text

Is there a way to make this theme mobile-friendly?

2) I installed the WooCommerce plug-in as you suggested and it works, but on my shop page, I can’t seem to have a hero graphic at the top of the page:

http://www.jkconditioning.com/shop

Please advice – thanks!

Jon

[Bill Robbins]

Good Morning Jon,

Two great questions there. Let me see if we can find good answers for you.

Mobile

The theme is made to play nicely with mobile devices, but depending on what content is added, sometimes it can take a bit of adjusting to make sure everything flows like it should. Is there a specific part you’re having trouble with and would like to change? If you’ll let me know I’ll be happy to help you tweak that. Also let me know what mobile device you’re using too.

Shop Hero

On the “shop” page, like the “blog” page, the actual page’s content is ignored by WordPress. The only parts of it that are considered are the title and the URL slug. Everything else gets overlooked, including the hero section.

Just this week I had a customer asking how to add WooCommerce and a hero image to one of my church themes. In helping her out, I believe I came up with a solution that will work for you here. It’ll take just a bit of editing. Here’s what to do:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose hero-options.php
3. Replace everything in this file with this:

   
   (Be sure to copy that code directly from the support site and not the notification email.)

4. Save your changes.

That code is made to work when the “shop” has the “slug” set to be “shop” so if you change that, we’ll have to alter the code a bit. Also that will give you an image hero. If you need something other than that, let me know.

Thanks,
Bill

[Jon Kawamoto]

Hi Bill,

I followed what you said, but no dice re: Hero graphic on “shop” page – not sure if you view source code to help:

http://jkconditioning.com/shop/

Re: mobile

I’m using an iPhone. I realized I have some tables that do not get adjusted when using a mobile device, so half of it get’s cut off.

You can view one table on my landing page:

http://www.jkconditioning.com

And another table on my Article page:

http://jkconditioning.com/articles/

Please advise.

Thanks again for your quick responses and help.

Jon

[Bill Robbins]

Hey Jon,

Tables can be tough with mobile devices. You might try using columns instead of tables for layout out those elements. There are lots of WordPress plugins for columns out there that let you insert them via short codes. You might try https://wordpress.org/plugins/easy-columns/ or https://wordpress.org/plugins/wens-responsive-column-layout-shortcodes/ . They both claim to provide responsive columns that should adjust based on the screen size being used.

---

I rearranged the order of the code for the hero section. Try copying and pasting it in there again and let me know what you come up with. It seems to have done the trick on a quick test I just ran.

Thanks,
Bill

[Jon Kawamoto]

Hi Bill,

The hero photo works on the shop page now – thank you.

And thanks for the suggestion. I’ll try them out!

Cheers!

[Bill Robbins]

Fantastic. Let me know if you need anything else.

Enjoy your day!

[Jon Kawamoto]

I do have another question:

My thumbnails on my shop page are very fuzzy (see attached or click link) – any way to fix that?

http://www.jkconditioning.com/shop

Thanks!

Attachments:

1. 

   2014-10-01_0844.png
   

[Bill Robbins]

Try setting your catalog image size in you WooCommerce settings to be 250 pixels square. You’ll have to either upload the product images again or install and run the regenerate thumbnails plugin for it to make a difference. The images are being enlarged and that’s what’s causing them to be fuzzy.

Bill

[Jon Kawamoto]

Thanks! I’ll try that.

[Author]

Posts