Using Jigoshop with Foxy

[Jon Dunning]

I’ve been setting up an ecommerce type page within a site that I’ve built with Foxy. I’m using the Jigoshop plugin and everything is working fine when it’s viewed on a computer. However when it is viewed on a mobile device it doesn’t work properly.

I’ve posted on the Jigoshop forum about this problem but I can’t seem to find a solution there. I thought maybe it had something to do with the settings within Foxy and how it behaves on mobile devices.

To see what I mean you can check out what I’m building at

theferalpigkauai.com/temp-store

Any input would be greatly appreciated

[Bill Robbins]

Jon,

Let’s see if this doesn’t help. Go to the theme options page and select the styling tab. Scroll down to the Custom CSS tab and paste this:

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.foxy-catalog,
	.page-content {
		margin-right: 0;
		width: 58% !important;
	}
	
}

@media only screen and (max-width: 767px) {
	
	.single .page-content {
		width: 90%;
	}

	div.product div.images,
	div.product div.summary {
		float: none !important;
		width: auto !important;
		margin-right: 0;
	}
		
	div.shr-bookmarks,
	div.shr-bookmarks-center,
	div.shr-bookmarks-expand {
		display: none;
	}
		
	article h1, 
	h2.title, 
	.page-content h1, 
	h1.page-title {
		margin: 0 0 15px;
	}

}

Save your settings and see if that helps. If you run into trouble, let me know.

Bill

[Jon Dunning]

Thanks for the input Bill but that didn’t seem to change anything. If I were to add that directly into the css file do you think it would make a difference?

[Bill Robbins]

Jon,

You could paste it to the very bottom of the style.css file. Let me know if you run into any trouble.

Bill

[Jon Dunning]

So as it seems, this fix did in fact work for each individual product page. they seem to be working fine now. The main product page with all the items, however, is unchanged.

So we appear to be on the right path. any thoughts on how to fix the main product page?

thanks for your help so far.

[Bill Robbins]

Jon,

Add this there as well to the custom css and see if that’s what you need:

@media only screen and (max-width: 767px) {
	
	.foxy-catalog {
		width: 90%;
	}

}

In tweaking that earlier code, it looks like I left that out. If you have trouble, let me know,
Bill

[Jon Dunning]

Awesome Bill,

That did the trick for the product page. Thanks for all your help.

Should I add similar code for the Cart, Check-Out and Thank You pages where “.foxy-catalog {” is the name of each page? Those also need to be adjusted.

Thanks Again

[Bill Robbins]

Jon,

You are absolutely right. This will add in the shopping cart and checkout:

@media only screen and (max-width: 767px) {
	
	.foxy-catalog,
	.jigoshop-cart .page-content,
	.jigoshop-checkout .page-content {
		width: 90%;
	}

}

And this will change the background color for the payment box too:

#payment,
.payment_box {
	background: transparent !important;
}

Have a great week,
Bill

[Jon Dunning]

Thanks for all your help Bill.

[Author]

Posts