I posted this question to the Shopify forums with no response, so I'm trying here.
I'm attempting to embed my Shopify products (preferably as collections) into a > custom themed Wordpress. I've got a working version of the buy buttons and the
subsequent product embed working - but how on earth do I set about
customizing it completely?
Basically, I want the product image, title, price, and "buy now"
button to redirect to the product's Wordpress Page. On that page, I
want a larger version of the product image along with the title,
description, variables (colour/quantity etc), and price calculated
through the variables.
I've been staring at code for three days with no luck. Any help would
be enormously appreciated!
Here is the embed code generated by Shopify:
<div data-accent_color="767676" data-background_color="ffffff" data-button_background_color="7fb466" data-button_text_color="ffffff" data-cart_button_text="Cart" data-cart_title="Your cart" data-cart_total_text="Total" data-checkout_button_text="Checkout" data-discount_notice_text="Shipping and discount codes are added at checkout." data-embed_type="cart" data-empty_cart_text="Your cart is empty." data-shop="copyking-2.myshopify.com" data-sticky="true" data-text_color="000000"></div>
<div data-background_color="ffffff" data-button_background_color="7fb466" data-button_text_color="ffffff" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-buy_button_text="Buy now" data-collection_handle="frontpage" data-display_size="compact" data-embed_type="collection" data-has_image="true" data-next_page_button_text="Next page" data-product_handle="" data-product_modal="true" data-product_name="" data-product_title_color="000000" data-redirect_to="modal" data-shop="copyking-2.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>
Unfortunately we don't yet support that level of customization through the Buy Button channel. However, if you want to retrieve the product image, title and price from Shopify and link to another page on your site, you could use the JS Buy SDK. This will allow you to fetch the product information from a collection or list of products (or single product) to render into your own page.
You just have to edit the attribute data-button_background_color, or you can use this Shopify app, it allow you customize the button color.
Related
Hello i'm on my first webshop project, and mostly been doing normal wordpress websites in the past. I am making the shop with woocommerce and the storefront theme.
On the website the owner want the customers to be able to see the "available on backorder" message that i linked in the first image to where the red line is on the second image.
The first image is from the shopping cart page, and the second is on the checkout page.
Picture one of the shopping cart page and Picture of the checkout page
So the problem is i dont really know how to add the code for showing it on the individual product on the checkout page.
Since im still pretty new to the add_filter or function coding, i dont really have anything to show other than the two related pictures I hope the question makes sense, since english isnt my first language.
Hoping to get some help.
I currently have a woocommerce website, the ability to customise a product on woocommerce is limited, so I also have a third-party website for the custom products.
Customer will upload photo, customise their product and I want them to continue the checkout through main website.
Once customer adds custom product to their cart (in third party website) the URL used will direct them back to Woocommerce website.
i.e.
?add-to-cart=product_id&attribute_reference=02&attribute_pricing=99
What I need help with is the image.
It is currently using the standard woocommerce-placeholder.
How would I bring the customers custom product image across so that it is shown in the woocommerce checkout instead of the placeholder img.
Cheers!
I am setting up a website for my new business, using Woocommerce Bookings on WordPress.
Although most elements are working on desktop and some mobile devices, product pages don't properly display on some other mobile devices such as iOS devices, for instance.
Below is a screen capture of what should appear on a product page : that is person and date selectors + "add to cart" button.
Screen capture 1:
However, on some devices here is what appears : selectors and Add To Cart button are hidden.
Screen capture 2:
When I check the source code on mobile, there are "display : none" styling elements for these hidden elements. However, I can't figure out how to find the source file on which this rule is edited and how to override it so that all elements display, even on smaller screens.
A product test page would be this one : https://parisian-wanderings.com/product/test
Can you help me out on this problem, please?
I want to create an e-shop and I want to redirect customers to google images to see photos of the produc (if there are). How can I retrieve the product sku and provide a button which directs (in a new tab) customers to google images search results by that sku?
thanks in advance
Google Image search can be done on your page by going through this tutorial on Google's website TUTORIAL
As far as retrieving the product SKU, that depends how you saved the product SKU in the database. If you are talking about the manufacturer's barcode, I don't think you can just magically come up with that. You should save the barcode in a custom field for each product in your database, then call the custom field using the Wordpress function get_post_meta
I am currently developing an interface that allows you to customize a product. I am implementing on Wordpress, but I need to generate an order after you finish the customization process. So it is necessary that the data is added as a product in the shopping cart WooCommerce. Is that possible? What would be the procedure?
As per your requirements i assume a following scenario
For example you have a site which which sells printed Tshirts.
The flow of this example site is that a user comes selects a tshirt, customizes the tshirt product say by adding Tshirt's color, Image on tshirt and Tshirt's size.
These customization added by the customer at the frontend on product page or cart can be stored in post meta for that order.
So if your case is some what like this then Yes this is possible.
And you can use the following links which will help you to achieve your goal.
How to Add Custom Data to WooCommerce Order
and
Custom WooCommerce Order Meta
Let me know if this solution works for you.