
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UX Builder | 79mplus</title>
	<atom:link href="https://www.79mplus.com/project_category/ux-builder/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.79mplus.com</link>
	<description>Top-Tier WordPress Development Company for Custom, Scalable Solutions</description>
	<lastBuildDate>Fri, 09 Nov 2018 09:09:43 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>

<image>
	<url>https://www.79mplus.com/assets/cropped-favicon2-32x32.png</url>
	<title>UX Builder | 79mplus</title>
	<link>https://www.79mplus.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</title>
		<link>https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/</link>
					<comments>https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/#respond</comments>
		
		<dc:creator><![CDATA[79mplus Admin]]></dc:creator>
		<pubDate>Wed, 18 Jul 2018 10:14:04 +0000</pubDate>
				<guid isPermaLink="false">https://www.79mplus.com/?post_type=project&#038;p=496284</guid>

					<description><![CDATA[<p><a rel="nofollow" href="https://www.79mplus.com">79mplus</a><br />
<img src="https://www.79mplus.com/assets/sage-featured.jpg" style="display: block; margin: 1em auto"><br />
<a rel="nofollow" href="https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/">WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</a></p>
<p>The post <a rel="nofollow" href="https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/">WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</a> appeared first on <a rel="nofollow" href="https://www.79mplus.com">79mplus</a> and is written by <a rel="nofollow" href="https://www.79mplus.com/author/79mplus_admin/">79mplus Admin</a></p>
]]></description>
										<content:encoded><![CDATA[<p><a rel="nofollow" href="https://www.79mplus.com">79mplus</a><br />
<img src="https://www.79mplus.com/assets/sage-featured.jpg" style="display: block; margin: 1em auto"><br />
<a rel="nofollow" href="https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/">WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</a></p>
<p><div class="et_pb_section et_pb_section_0 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_0">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_post_title et_pb_post_title_0 et_pb_bg_layout_light  et_pb_text_align_center"   >
				
				
				
				
				
				<div class="et_pb_title_container">
					<h1 class="entry-title">WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</h1>
				</div>
				
			</div><div class="et_pb_module et_pb_text et_pb_text_0  et_pb_text_align_center et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><div class="project_categories mplus"><a href="https://www.79mplus.com/project_category/anything-backend">Anything Backend</a>, <a href="https://www.79mplus.com/project_category/custom-plugin-development">Custom Plugin Development</a>, <a href="https://www.79mplus.com/project_category/plugin-customization">Plugin Customization</a>, <a href="https://www.79mplus.com/project_category/theme-customization">Theme Customization</a>, <a href="https://www.79mplus.com/project_category/tm-extra-product-options">TM Extra Product Options</a>, <a href="https://www.79mplus.com/project_category/ux-builder">UX Builder</a>, <a href="https://www.79mplus.com/project_category/woocommerce">WooCommerce</a>, <a href="https://www.79mplus.com/project_category/wordpress">WordPress</a></div></div>
			</div><div class="et_pb_module et_pb_image et_pb_image_0 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img fetchpriority="high" decoding="async" width="1100" height="480" src="https://www.79mplus.com/assets/sage-project-banner-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/sage-project-banner-01.png 1100w, https://www.79mplus.com/assets/sage-project-banner-01-300x131.png 300w, https://www.79mplus.com/assets/sage-project-banner-01-768x335.png 768w, https://www.79mplus.com/assets/sage-project-banner-01-1024x447.png 1024w, https://www.79mplus.com/assets/sage-project-banner-01-1080x471.png 1080w, https://www.79mplus.com/assets/sage-project-banner-01-510x223.png 510w" sizes="(max-width: 1100px) 100vw, 1100px" class="wp-image-496364"></span>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div><div class="et_pb_section et_pb_section_1 et_pb_with_background et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_1">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_1  et_pb_text_align_left et_pb_bg_layout_dark">
				
				
				
				
				<div class="et_pb_text_inner"><h2>Challenge</h2>
<p>Our client was looking for someone who could make him a custom-style WooCommerce product page for their bicycle products. He also wanted so that their users could customize the product, choose different options, check the price and place an order. There was another requirement which was interesting. He wanted the custom styled product pages just for some of his new products, but not others. He wanted the rest of the products to remain styled like before. He had pixel perfect mockups of the page, which was very helpful later. Dark, contrasting, beautiful product images and the unique sense of challenge thrilled us. So we took the job.</p>
<p><strong>Our task mainly was to:</strong></p>
<ul>
<li>Create the customized product page according to mockup</li>
<li>Integrate TM Extra Product Options with our mockup design</li>
<li>Keep our customizations separate from other normal products</li>
<li>Make sure our customizations adopt to mobiles and tablets</li>
<li>Make sure it plays well with UX Builder</li>
</ul></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div><div class="et_pb_section et_pb_section_2 et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_2">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_2  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h1>Our Solution</h1>
<p>This is a fun project but required careful planning. We had to be careful to implement features so that the aesthetics are not ruined. And we also had to take care of any existing functionality so that they are not disturbed.</p>
<p>Here’s how we solved the problem:</p></div>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_3">
				<div class="et_pb_column et_pb_column_1_2 et_pb_column_3  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_1 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="600" height="300" src="https://www.79mplus.com/assets/sage-admin-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/sage-admin-01.png 600w, https://www.79mplus.com/assets/sage-admin-01-300x150.png 300w, https://www.79mplus.com/assets/sage-admin-01-510x255.png 510w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-496302"></span>
			</div>
			</div><div class="et_pb_column et_pb_column_1_2 et_pb_column_4  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_3  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>Controls on Admin</h3>
<p>We prepared settings in such a way so that client can easily switch between new style and the old style. It helped keep the old product pages intact and the new changes remain on its own separate place, as client wanted.</p>
<p>&nbsp;</p></div>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_4">
				<div class="et_pb_column et_pb_column_1_2 et_pb_column_5  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_4  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>TM EPO Integration</h3>
<p>We tapped into TM EPO integration for WooCommerce to get the product customization to work on our new product pages. We had to look into how TM EPO handled custom options. We then focused on populating and debugging the interface based on the data that was available to us. It was adventurous to say the least.</p></div>
			</div>
			</div><div class="et_pb_column et_pb_column_1_2 et_pb_column_6  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_2 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="600" height="300" src="https://www.79mplus.com/assets/tmepo-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/tmepo-01.png 600w, https://www.79mplus.com/assets/tmepo-01-300x150.png 300w, https://www.79mplus.com/assets/tmepo-01-510x255.png 510w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-496304"></span>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_5">
				<div class="et_pb_column et_pb_column_1_2 et_pb_column_7  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_3 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="600" height="300" src="https://www.79mplus.com/assets/custom-templating-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/custom-templating-01.png 600w, https://www.79mplus.com/assets/custom-templating-01-300x150.png 300w, https://www.79mplus.com/assets/custom-templating-01-510x255.png 510w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-496310"></span>
			</div>
			</div><div class="et_pb_column et_pb_column_1_2 et_pb_column_8  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_5  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>Custom Templating</h3>
<p>We had to implement a templating system for our unique requirements. We tried to keep it as separate from WC templates as much as possible. Ultimately this has let us make our changes as freely as possible, without disturbing the existing styles and templates. We had to implement a custom product slider and many other minor things, which we could then do easily. At the end, we were able to pack everything inside the child theme.</p></div>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_6">
				<div class="et_pb_column et_pb_column_1_2 et_pb_column_9  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_6  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>Support for Different Screens</h3>
<p>We submitted initial design quickly, but devices are notoriously different and was quickly getting feedbacks on different issues. For example, older iPads used to handle CSS differently, which caused many issues on those devices. We applied changes so that now it appears perfectly on all common devices, including iPads, iPhones.</p></div>
			</div>
			</div><div class="et_pb_column et_pb_column_1_2 et_pb_column_10  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_4 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="600" height="300" src="https://www.79mplus.com/assets/different-screens-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/different-screens-01.png 600w, https://www.79mplus.com/assets/different-screens-01-300x150.png 300w, https://www.79mplus.com/assets/different-screens-01-510x255.png 510w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-496308"></span>
			</div>
			</div>
				
				
				
				
			</div><div class="et_pb_row et_pb_row_7">
				<div class="et_pb_column et_pb_column_1_2 et_pb_column_11  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_5 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="600" height="300" src="https://www.79mplus.com/assets/ux-builder-01.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/ux-builder-01.png 600w, https://www.79mplus.com/assets/ux-builder-01-300x150.png 300w, https://www.79mplus.com/assets/ux-builder-01-510x255.png 510w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-496356"></span>
			</div>
			</div><div class="et_pb_column et_pb_column_1_2 et_pb_column_12  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_7  et_pb_text_align_left et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>Designed with UX Builder in mind</h3>
<p>The main content was made with UX Builder. So we had to work around it to implement various features. Documentation for UX Builder was scarce. And to make it even worse, proper hooks were absent as well. We had to find other routes to make it work.</p></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div><div class="et_pb_section et_pb_section_3 et_pb_with_background et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_8">
				<div class="et_pb_column et_pb_column_4_4 et_pb_column_13  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_image et_pb_image_6 et_animated et-waypoint">
				
				
				
				
				<span class="et_pb_image_wrap "><img decoding="async" width="400" height="282" src="https://www.79mplus.com/assets/sage-project-image.png" alt="" title="WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options" srcset="https://www.79mplus.com/assets/sage-project-image.png 400w, https://www.79mplus.com/assets/sage-project-image-300x212.png 300w" sizes="(max-width: 400px) 100vw, 400px" class="wp-image-496345"></span>
			</div><div class="et_pb_module et_pb_text et_pb_text_8  et_pb_text_align_center et_pb_bg_layout_light">
				
				
				
				
				<div class="et_pb_text_inner"><h3>Putting it all together</h3>
<p>It had some delightful challenges but we pulled it off. And the result was astounding, breathtaking! Product customization feature with shiny product images got our hearts pumping. We are also happy that we got more sub-projects from the client for other modifications later on.</p>
<p>It was a complex project, but we had fun developing it.</p></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div></p>
<p>The post <a rel="nofollow" href="https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/">WooCommerce Product Customizer for Bicycles Based on TM Extra Product Options</a> appeared first on <a rel="nofollow" href="https://www.79mplus.com">79mplus</a> and is written by <a rel="nofollow" href="https://www.79mplus.com/author/79mplus_admin/">79mplus Admin</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.79mplus.com/project/wc-product-customizer-bicycle-tm-epo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
